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内 容 简介 

本 书 以 Axure RP 8.0 为 设计 工具 ， 
对 主流 网 站 原型 设计 的 流程 和 制作 技巧 进 
行 了 全 面 、 细 致 的 剖析 。 

本 书 首先 从 产品 原型 设计 概述 进行 介 
绍 ， 其 中 对 原型 设计 中 的 交互 设计 进行 了 
多 方面 的 讲解 ， 然 后 介绍 了 Axure RP 8.0 
在 原型 设计 中 的 实际 应 用 ， 将 最 实用 的 技 
术 、 最 快捷 的 操作 方法 、 最 丰富 的 内 容 介 
绍 给 读者 ， 使 读者 在 掌握 软件 功能 的 同 
时 ， 迅 速 提高 产品 原型 设计 的 效率 ， 并 极 
大 地 提高 从 业 素 质 。 

本 书 结构 清晰 、 实 例 经 典 、 技 术 实 
用 ， 适 合 网 站 产品 原型 设计 初 、 中 级 读者 阅 
读 ， 也 可 以 作为 高 等 院 校 相关 专业 的 教材 。 
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在 如 今 这 个 互联 网 技术 飞速 发 展 的 时 代 , 网 络 已 经 成 为 人 们 生活 中 不 可 或 缺 的 一 部 分 。 同 时 ， 
网 页 设计 也 开始 被 众多 的 企 事业 单位 所 重视 ， 这 就 为 网 站 产品 原型 设计 人 员 提 供 了 很 大 的 发 展 
空间 。 

网 站 产品 原型 设计 作为 网 页 设计 的 前 期 储备 ， 有 着 至 关 重 要 的 作用 ， 所 以 一 些 专 门 设计 网 
站 原型 的 软件 应 运 而 生 。 

作为 目前 非常 流行 的 网 站 原型 设计 软件 一 一 Axure RP 8.0， 和 凭借 其 强大 的 功能 和 易学 易 用 
的 特性 深 受 广大 原型 设计 师 的 喜爱 。 本 书 以 Axure RP 8.0 版 本 进行 讲解 ， 全 面 细 致 地 讲解 了 原 
型 设计 在 网 站 设计 领域 的 相关 知识 。 本 书 共 分 10 章 ， 各 章 内 容 安 排 如 下 。 

第 1 章 网 站 产品 原型 设计 概述 ， 主 要 介绍 网 站 产品 原型 设计 的 概念 、 参 与 网 站 产品 原型 
设计 的 人 员 、 创 建 网 站 产品 原型 的 方法 和 网 站 产品 原型 设计 的 重要 性 等 内 容 。 

第 2 章 初 识 Axure RP, 主 要 介绍 Axure RP 的 一 些 基 本 操作 ,包括 Axure RP 的 下 载 与 安装 、 
Axure RP 工作 界面 简介 、Axure RP 的 菜单 栏 、Axure RP 的 工具 栏 、Axure RP 的 面板 和 工作 区 、 
自 定义 工作 界面 、 使 用 Axure RP 的 帮助 资源 和 Axure RP 的 主要 功能 等 知识 。 

第 3 章 页 面 设置 与 自 适应 视图 ， 主 要 介绍 如 何 进行 页 面 设置 与 使 用 自 适应 视图 ， 包 括 使 
用 欢迎 界面 、 新 建 和 设置 Axure RP 文件 、“ 页 面 ”面板 、“ 检 视 ” 面 板 、 辅 助 线 和 网 格 的 使 用 、 
设置 遮 单 以 及 使 用 自 适 应 视图 等 内 容 。 

第 4 章 Axure RP 元 件 的 使 用 ， 主 要 介绍 各 种 元 件 的 使 用 方法 ， 包 括 了 解 “元 件 ” 面 板 、 
元 件 的 类 型 、" 概 要 "面板 的 作用 、 元 件 的 属性 、 设 置 元 件 的 样式 、 创 建 和 管理 样式 、 元 件 的 转换 、 
创建 元 件 库 和 使 用 外 部 元 件 库 等 内 容 。 

第 5 章 Axure RP 母 版 的 使 用 ， 主 要 介绍 母 版 的 使 用 方法 ， 包 括 母 版 的 基本 概念 、 创 建 和 
编辑 母 版 、 使 用 母 版 和 母 版 使 用 情况 等 内 容 。 

第 6 章 变量 、 表 达 式 和 函数 的 使 用 ， 主 要 介绍 各 种 变量 、 表 达 式 和 函数 的 使 用 方法 ， 包 
括 使 用 变量 、 设 置 条 件 、 使 用 表达 式 、 函 数 的 使 用 方法 以 及 常见 的 函数 等 内 容 。 

第 7 章 动态 面板 元 件 的 使 用 ， 主 要 介绍 动态 面板 元 件 的 使 用 方法 ， 包 括 熟悉 动态 面板 元 件 、 
转换 为 动态 面板 元 件 和 动态 面板 元 件 的 作用 等 内 容 。 

第 8 章 中 继 器 元 件 的 使 用 ， 主 要 介绍 中 继 器 元 件 的 基本 组 成 、 数 据 集 的 操作 、 项 目 列表 
操作 等 内 容 。 

第 9 章 网 站 产品 原型 的 发 布 与 输出 ， 主 要 介绍 创建 共享 位 置 、TortoiseSVN 客户 端 应 用 、 
使 用 团队 项 目 、 使 用 Axure Share、 发 布 和 查看 原型 等 内 容 。 

第 10 章 商业 性 综合 案例 ， 主 要 介绍 商业 案例 的 设计 思路 以 及 制作 过 程 ， 包 括 网 站 登录 界 
面 案例 、 购 物 网 站 商品 筛选 案例 、 网 页 版 微 博 案例 和 网 页 版 百度 首页 案例 。 
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本 书 由 张 晓 景 编著 ， 另 外 李 晓 斌 、 高 鹏 、 胡 敏 敏 、 张 国 勇 、 贾 勇 、 林 秋 、 胡 卫 东 、 羔 玉 声 、 
晓 丽 、 郭 慧 等 人 也 参与 了 部 分 编写 工作 。 本 书 在 写作 过 程 中 力求 严谨 ， 由 于 作者 水 平 所 限 ， 
书 中 难免 有 疏漏 和 不 足 之 处 ， 希 望 广 大 读者 批评 、 指 正 ， 欢 迎 与 我 们 沟通 和 交流 。QOQ 群 名 称 : 
页 设计 与 开发 交流 群 ，QQ 群 号 : 705894157。 

为 了 方便 读者 学 习 ， 本 书 为 每 个 实例 提供 了 教学 视频 ， 只 要 扫描 一 下 书 中 实例 名 称 旁 边 的 
二 维 码 ， 即 可 直接 打开 视频 进行 观看 ， 或 者 推送 到 自己 的 邮箱 中 下 载 后 进行 观看 。 本 书 配套 的 
立体 化 学 习 资 源 中 提供 了 书 中 所 有 实例 的 素材 源 文件 、 最 终 文件 、 教 学 视频 和 PPT 课件 ， 并 附 
赠 海量 实用 资源 。 读 者 在 学 习 时 可 扫描 下 面 的 二 维 码 ， 然 后 将 内 容 推 送 到 自己 的 邮箱 中 ， 即 可 
下 载 获 取 相 应 的 资源 ( 注意 : 请 将 这 几 个 二 维 码 下 的 压缩 文件 全 部 下 载 完毕 后 ， 再 进行 解压 ， 
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概括 来 说 ， 网 站 产品 原型 就 是 网 站 产品 面世 之 前 的 一 个 简单 框 


架设 计 。 简 单 来 说 ， 就 是 将 页 


的 模块 、 元 素 和 人 机 交互 等 形式 ， 利 用 线 框 描述 的 方式 ， 将 产品 在 脱离 皮肤 的 状态 下 进行 更 加 具体 


和 生动 的 表达 ， 如 图 1-1 所 示 。 


Logo 文章 标题 


Lorem ipsum dolor sit amet 文本 标签 
consectetur adipiscing elit, 
Aenean euismod bibendum 
laoreet. Proin gravida dolor 
sit amet lacus accumsan et 
viverra justo commodo. Proin 
sodales pukvinar tempor 
Cum sociis natoque 
penatibus et magnis dis 
parturient montes, nascetur 
ridiculus mus 
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随 着 互联 网 技术 的 日 益 普及 ， 为 了 获得 更 好 的 原型 效果 ， 很 多 产品 经 理 采用 “ 高 保 真 ” ， 的 原理 ， 以 确保 策划 与 
最 终 的 展示 效果 一 致 。 


[12 这 参与 网 站 产品 原型 设计 的 人 员 ?2 


一 个 项 目的 设计 与 开发 ， 通 常 需要 多 位 人 员 的 共同 努力 。 很 多 人 认为 产品 原型 设计 是 整个 项 目 


需要 与 产品 经 理 反复 讨论 ， 反 复 修改 。 
为 了 避免 以 上 情况 ， 在 开始 原型 设计 时 ， 产 品 经 理应 要 求 界面 


角色 ， 对 于 页 面 设计 和 用 户 体验 设计 只 是 停留 在 初级 水 平 。 一 般 设计 师 独 立 设计 出 


的 早期 过 程 ， 只 需要 产品 经 理 参 与 即 可 。 但 实际 上 产品 经 理 只 是 了 解 产品 特性 、 用 户 和 市 场 需求 的 


原型 图 后 ， 可 能 


设计 师 (Ul) 和 


户 体验 设计 师 
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(U 日 一 起 , 共同 参与 产品 原型 的 设计 与 制作 , 如 图 1-2 所 示 。 这 样 才 可 以 设计 出 既 符 合 产品 经 理 预 期 ， 
又 具有 良好 用 户 体验 、 页 面 精 美的 产品 原型 ， 可 以 有 效 地 避免 产品 设计 开发 过 程 中 反复 修改 的 情况 。 


(ui 设 师 ->( 产品 经 理 ”)< 一 ( UE 设计 师 ) 


图 1-2 
互联 网 产品 经 理 是 互联 网 公司 中 的 一 种 职位 ， 负 责 互 联网 产品 的 计划 和 推广 ， 以 及 互联 网 产品 
生命 周期 的 演化 。 


品 经 理 是 企业 中 专门 负责 产品 管理 的 职位 ， 主 要 负责 市 场 调查 ， 根 据 用 户 的 需求 确定 开发 何 种 产品 ， 选 择 何 


种 技术 、 商 业 模 式 等 。 并 推动 相应 产品 的 开发 组 织 ， 还 需要 根据 产品 的 生命 周期 ， 协 调研 发 、 营 销 、 运 营 等 ， 确 定 
和 组 织 实施 相应 的 产品 策略 ， 以 及 其 他 一 系列 相关 的 产品 管理 活动 。 


于 UI 设计 师 © 


Ul 是 User Interface 的 缩写 ， 即 用 户 界 面 。UI 设计 师 简称 UID， 即 User Interface Designer， 是 
旨 从 事 对 软件 界面 的 人 机 交互 、 操 作 逻 辑 、 界 面 美观 等 整体 相关 设计 工作 的 人 员 。 

UI 设计 师 的 设计 范围 包括 高 级 网 页 设计 和 移动 应 用 界面 设计 ， 是 目前 信息 产业 中 较为 抢手 的 人 
未 忘 三 5 


fe UE 设计 师 © 


UE 是 User Experience 的 缩写 ，UE 设计 师 指 的 是 用 户 体验 相关 的 设计 人 员 。 用 户 体验 是 指 用 户 
访问 一 个 网 站 或 者 使 用 一 个 产品 时 的 全 部 体验 。 他 们 的 印象 和 感觉 是 否 良好 ， 是 否 享受 ， 是 否 还 想 
再 使 用 网 站 。 他 们 能 够 忍受 的 问题 、 疑 惑 和 BUG 的 程度 ， 都 是 UE 设计 师 的 工作 范畴 。 


二 避 经 理 © 


根据 所 负责 的 互联 网 产品 是 用 户 产品 还 是 商业 产品 ， 可 以 分 为 互联 网 用 户 产品 经 理 和 互联 网 商 
业 产 品 经 理 。 用 户 产 品 经 理 最 关心 的 是 互联 网 用 户 产 品 的 用 户 体验 ， 商 业 产 品 经 理 最 关心 的 是 互联 
网 商业 产品 的 流量 变现 能 力 。 

互联 网 产品 经 理 在 互联 网 公司 中 处 于 核心 位 置 ， 需 要 非常 强 的 沟通 能 力 、 协 调 能 力 、 市 场 洞察 
力 和 商业 敏感 度 ， 不 但 要 了 解 消费 者 和 市 场 ， 而 且 要 能 与 各 种 风格 迎 异 的 团队 ， 如 开发 团队 和 销售 
团队 进行 默契 的 配合 。 可 以 说 互联 网 产品 经 理 决定 了 一 个 互联 网 产品 的 成 败 。 

互联 网 产品 经 理由 于 行业 的 不 同 ， 可 能 工作 职责 也 不 尽 相 同 。 但 是 核心 工作 内 容 基 本 包含 以 下 
几 个 方面 。 
负责 提出 网 站 需求 方案 和 运营 策略 可 行 性 的 建议 。 
负责 网 站 的 内 容 规 划 、 广 告 位 开发 和 管理 及 日 程 运营 管理 。 
统计 网 站 的 各 项 数据 和 用 户 反馈 ， 分 析 用 户 需求 、 行 为 ， 搜 集 网 站 运营 中 产生 的 产品 购买 及 网 
站 功能 需求 ， 综 合 各 部 门 的 意见 和 建议 ， 统 筹 安排 ， 讨 论 、 修 改 、 制 定 出 可 行 性 方案 。 

与 技术 部 、 编 辑 部 等 部 门 紧 密 结合 ， 确 保 产 品 实现 进度 和 质量 ， 协 调 相关 部 门 进行 网 站 的 开发 
及 日 常 维护 。 
配合 市 场 部 、 客 服部 进行 相关 的 商品 合作 ， 跟 踪 竞 争 对 手 ， 把 握 互 联网 市 场 趋势 ， 制 定 产品 竞 
争战 略 和 计划 。 
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创建 网 站 产品 原型 的 方法 p 


用 户 可 以 使 用 直接 在 纸 上 绘 制 的 方式 创建 产品 原型 ， 也 可 以 使 用 PowerPoint 和 Visio 等 软件 包 
建 产品 原型 ， 当 然 还 可 以 选择 一 款 专业 的 原型 设计 软件 来 创建 产品 原型 。 


下 吉 目 纸张 描绘 网 站 原型 @ 


设计 师 用 笔直 接 在 纸 上 进 行 产品 原型 的 描绘 ， 获 得 大 致 的 原型 效果 ， 如 图 1-3 所 示 。 这 种 方式 
通常 是 在 产品 经 理 进 行 原型 构思 阶段 使 用 。 通 过 这 种 方式 可 以 将 原型 产品 的 构思 和 框架 基本 确定 ， 
然后 再 通过 专业 的 软件 将 原型 更 形象 更 直观 地 转移 到 电子 文档 中 ， 以 便 后 续 的 研讨 、 设 计 、 开 发 和 
备案 。 


PowerPoint 可 以 在 Mac 或 Windows 系统 的 计算 机 上 使 用 ， 可 以 阅读 和 编辑 PPT 格式 的 原型 图 。 
同时 在 手机 微 信 的 聊天 窗口 中 ， 也 可 以 直接 阅读 PPT 格式 的 原型 图 ， 甚 至 可 以 通过 第 三 方 软件 将 画 
好 的 原型 图 导入 PowerPoint 中 ， 如 图 1-4 所 示 。 


支持 Windows 和 Mac 系 统 的 电脑 打开 
支持 iphone 和 Android 系 统 的 手机 打开 ”kBB 


as 
mis su 


图 1-4 
但 是 ，PowerPoint 页 面 的 面积 太 小 ， 又 不 支持 表达 多 个 页 面 之 间 的 跳 转 关 系 ， 页 面 的 缩放 也 难 
以 操作 , 而 且 PowerPoint 里 面 的 画图 控件 太 少 , 画图 工具 隐藏 得 比较 深 , 所 以 用 户 操作 起 来 不 太 方便 。 
Visio 在 创建 原型 上 比 PowerPoint 更 加 便于 操作 ， 可 以 快速 完成 原型 设计 ， 但 表现 力 较 弱 。Visio 
可 以 制作 一 些 简单 的 页 面 ， 但 不 适合 制作 一 些 比较 烦琐 的 大 型 页 面 。Visio 软件 启动 界面 及 新 建 页 面 


号 
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如 图 1-5 所 示 。 


VB 


专业 网 站 产品 原型 设计 软件 一 个 


目前 使 用 最 多 的 专业 的 原型 设计 软件 非 Axure RP 莫 属 。Axure RP 不 仅 具有 丰富 的 Web 控件 ， 
而 且 交互 性 也 做 得 很 好 ， 被 广泛 地 应 用 在 网 站 开发 设计 中 。 

Axure RP 是 一 个 专业 的 快速 原型 设计 工具 ， 让 负责 定义 需求 和 规格 、 设 计 功能 和 界面 的 专家 能 
够 快速 创建 应 用 软件 或 Web 网 站 的 线 框图 、 流程 图 、 原 型 和 规格 说 明文 档 。 作 为 专业 的 原型 设计 工具 ， 
它 能 快速 、 高 效 地 创建 原型 ， 同 时 支持 多 人 协作 设计 和 版 本 控制 管理 。 软 件 启动 界面 如 图 1-6 所 示 。 
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除了 Axure RP 以 外 ， 产 品 原型 设计 软件 还 有 很 多 ， 比 较 著 名 的 有 iRise Studio、MockupScreens 
和 Sketch 等 。 


不 同 的 公司 和 团队 ， 对 于 互联 网 网 站 产品 的 原型 设计 可 能 采用 的 方式 会 大 相 径 庭 ， 不 一 定 非 要 使 用 某 种 固定 的 
方式 ， 最 适合 自己 的 才 是 最 好 的 。 
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在 网 站 设计 过 程 中 ， 为 什么 一 定 要 设计 原型 呢 ? 能 不 能 不 做 原型 直接 设计 并 开发 产品 呢 ? 当然 
可 以 。 但 是 有 了 原型 ， 网 站 的 设计 开发 就 会 更 轻松 ， 同 时 也 减少 了 由 于 规划 不 足 而 造成 的 反复 修改 。 
原型 设计 是 帮助 网 站 与 App 设计 最 终 完成 标准 化 和 系统 化 的 最 好 手段 。 它 最 大 的 好 处 在 于 ， 不 
仅 可 以 有 效 地 避免 重要 元 素 被 忽略 ， 而 且 能 够 阻止 设计 师 做 出 不 准确 不 合理 的 假设 , 如 图 1-7 所 示 。 


站 = 


> 


原型 设计 


图 1-7 
论 你 是 移动 端 UI 设计 师 还 是 网 页 设计 师 ， 原 型 设计 的 重要 性 都 是 显而易见 的 。 原 型 设计 让 设 

eed ea td 
看 和 使 用 ， 随 之 给 予 反 馈 ， 并 且 在 最 终 版 本 敲定 之 前 进行 必要 的 调整 。 

在 项 目 开始 之 初 , 对 每 个 元 素 进行 调试 并 确保 它们 能 够 如 同 预期 一 样 运作 , 这 是 相当 重要 的 步骤 。 
当 完 成 可 交互 的 原型 之 后 ， 将 它 作为 一 个 成 型 的 界面 来 使 用 ， 看 看 它 能 否 带 来 预期 中 的 体验 效果 。 

用 户 可 以 测试 其 中 所 有 的 功能 ， 看 看 能 否 解决 规划 阶段 所 计划 解决 的 问题 。 如 果 是 在 完成 整体 
的 设计 和 开发 之 后 再 行 测试 ， 修 改 和 调整 的 成 本 就 相当 高 昂 了 。 

一 个 可 用 可 交互 的 原型 所 带 来 的 好 处 并 不 是 一 星 半 点 ， 它 还 可 以 帮助 开发 和 设计 人 员 从 不 同 的 
维度 上 来 规划 和 设计 产品 。 


网 站 产品 原型 设计 的 作用 p 


首先 ， 绝 大 多 数 的 客户 本 身 并 不 懂得 设计 知识 ， 也 不 懂得 编程 知识 ， 而 原型 为 他 们 展示 出 了 网 
站 或 App 最 基本 的 框架 或 模型 ， 让 他 们 明白 网 站 的 基本 外 观 和 运作 的 机 制 ， 如 图 1-8 所 示 。 


让 开发 变 得 轻松 


a 
原型 设计 节省 时 间 和 金钱 
对 于 设计 团队 和 客户 的 作用 
来 说 ， 是 双赢 的 局 面 


设计 团队 更 易 沟通 


客户 更 易 进行 反馈 


图 1-8 
一 个 可 交互 的 原型 基本 上 能 够 像 最 终 完成 的 产品 那样 运行 ， 使 用 者 可 以 对 它 进行 操作 ， 原 型 则 
会 给 予 相应 的 反馈 ， 使 用 者 可 以 随 之 明白 它 的 运作 方式 ， 而 设计 人 员 也 可 以 发 现 它 的 漏洞 ， 并 寻求 
解决 问题 的 方案 。 原 型 经 过 可 用 性 测试 之 后 ， 能 够 优化 出 更 好 的 用 户 体验 ， 能 够 在 产品 上 线 发 布 之 
前 排除 相当 一 部 分 的 潜在 问题 和 故障 。 


各 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


1. 让 开发 变 得 轻松 

实际 上 ， 原 型 会 让 开发 更 加 容易 。 当 网 站 或 者 App 设计 师 搞定 一 个 满意 的 原型 之 后 ， 开 发 人 员 
能 够 在 此 基础 上 开发 出 更 加 完善 的 代码 实现 方案 。 原 型 让 参与 者 能 够 看 到 网 站 或 者 App 发 布 之 后 是 
怎样 运作 的 。 


2. 节省 时 间 和 人 金钱 


节省 时 间 、 控 制 成 本 对 于 任何 企业 主 而 言 都 是 非常 重要 的 事情 。 当 设计 和 开发 流程 中 有 了 原型 
之 后 ， 将 会 节省 很 多 时 间 ， 降 低 成 本 。 

当 一 个 公司 想 要 推出 一 个 新 的 App 或 者 发 布 一 个 新 的 网 站 时 ， 总 会 集合 一 批 专业 的 人 员 来 完成 
这 个 项 目 。 随 着 时 间 的 推移 ， 花 销 会 不 断 增长 ， 项 目的 投入 自然 越 来 越 大 。 有 了 原型 之 后 ， 团 队 成 
员 能 够 围绕 着 原型 进行 快速 高 效 的 沟通 ， 哪 些 地 方 要 增删 ， 什 么 细节 要 修改 ， 这 样 的 方式 能 够 更 加 
快速 地 推进 项 目 进度 。 


3. 更 易 沟 通 与 反馈 


有 了 原型 之 后 ， 团 队 成 员 沟通 的 时 候 不 需要 彼此 发 送 大 量 的 图 片 和 PDF 文档 ， 取 而 代 之 的 是 添 
加 评论 和 链接 ， 或 者 是 原型 工具 内 建 的 反馈 工具 ， 沟 通 更 快 ， 原 型 的 修订 更 快 。 

版 本 修订 是 原型 设计 过 程 中 的 重要 组 成 部 分 ， 它 是 最 终 产品 能 完美 呈现 的 先决 条 件 。 原 型 能 够 
不 断 修正 进化 ， 这 使 得 它 成 为 产品 研发 中 最 有 价值 的 部 分 。 随 着 一 次 次 的 迭代 ， 产 品 本 身 会 越 来 越 
优秀 ， 而 版 本 修订 的 过 程 也 越 来 越 快速 而 简单 。 


Zr 


设计 和 开发 团队 倾向 于 借助 原型 来 完善 产品 ， 而 客户 和 企业 也 乐于 看 到 原型 。 参 与 到 项 目 中 的 
每 个 人 都 能 根据 他 们 的 所 见 来 判断 、 探 索 和 决策 。 原 型 成 为 讨论 的 焦点 ， 也 是 解决 问题 的 平台 。 


5. 不 断 测试 与 优化 


原型 主要 是 用 来 演示 产品 是 如 何 运作 的 ， 呈 现 具体 流程 的 流向 ， 不 论 它 是 否 流畅 ， 是 否 足够 合 
乎 逻辑 ， 都 是 原型 设计 。 不 断 地 对 原型 设计 进行 调试 ， 意 味 着 设计 师 可 以 在 迭代 中 不 断 优化 用 户 体 
验 和 产品 细节 ， 直 到 最 终 完成 设计 。 

随 着 测试 的 推进 ， 信 息 架构 、 导 航 和 用 户 流程 中 的 各 种 缺陷 会 在 不 断 的 交互 过 程 中 体现 出 来 。 
CTA 按钮 能 否 引 导 用 户 到 设计 师 计 划 中 的 页 面 ? 整个 页 面 的 布局 是 否 高 效 ? 导航 是 否 足够 好 用 ? 所 
有 的 这 些 问 题 都 能 借助 可 交互 的 原型 逐步 得 到 答案 。 


用 户 体验 在 网 站 原型 设计 中 的 表现 5 


如 今 互联 网 上 的 网 站 数量 数 以 万 计 ， 当 用 户 面 对 大 量 可 以 选择 的 网 站 时 ， 该 如 何 快速 访问 到 自 
己 感 兴趣 的 内 容 呢 ? 通常 都 是 用 户 自己 盲目 浏览 ， 筛 选 哪个 网 站 的 内 容 符合 个 人 阅读 的 需求 。 

随 着 互联 网 竞争 的 加 剧 ， 越 来 越 多 的 企业 开始 意识 到 提供 优质 的 用 户 体验 是 一 个 重要 的 、 可 持 
续 的 竞争 优势 。 用 户 体验 形成 了 客户 对 企业 的 整体 印象 ， 界 定 了 企业 和 竞争 对 手 的 差异 ， 并 且 决 定 
了 客户 什么 时 候 会 再 次 光顾 。 

在 设计 原型 的 时 候 ， 为 了 更 好 地 表现 网 站 内 容 并 留 住 更 多 的 浏览 者 ， 设 计 师 需要 注意 以 下 几 点 。 
外 ”规避 设计 时 自己 个 人 的 喜好 : 自己 喜欢 的 东西 并 不 一 定 谁 都 喜欢 。 例 如 网 页 的 色彩 应 用 ， 设 计 

师 个 人 喜欢 大 红 大 绿 , 并 且 在 设计 的 作品 中 过 多 使 用 这 样 的 颜色 , 那么 可 能 会 流失 很 多 潜在 客户 。 

原因 很 简单 ,就 是 跳跃 的 色彩 让 浏览 者 失去 对 网 站 的 信任 。 现 在 大 部 分 用 户 都 喜欢 简单 的 颜色 ， 

简约 而 不 简单 。 可 以 通过 先 浏览 其 他 设计 师 的 作品 ， 然 后 再 进行 设计 的 方法 来 实现 更 符合 大 众 


了 


的 设计 方案 。 当 然 浏 览 别 人 的 作品 不 等 于 要 抄袭 ， 抄 袭 的 作品 会 让 浏览 者 对 网 站 失去 信任 感 。 

这 样 做 的 目的 是 让 设计 师 在 别人 作品 的 基础 上 再 提高 ， 以 留 住 更 多 的 浏览 者 。 
名 ”考虑 不 同 层次 的 浏览 者 : 设计 师 必 须要 让 很 多 不 同 层 次 的 浏览 者 在 网 站 作品 上 达成 一 致 的 意见 ， 
也 就 是 常 说 的 “老少 句 宜 ”。 那 样 才能 说 明 设计 的 网 站 是 成 功 的 ， 因 为 抓 住 了 所 有 浏览 者 共同 
的 心理 特征 ， 吸 引 了 更 多 新 的 浏览 者 。 通 过 奖励 刺激 浏览 的 方法 尽 可 能 少 用 ， 虽 然 利益 是 最 大 
的 驱动 力 ， 但 是 网 络 的 现状 让 网 民 的 警惕 性 非常 高 ， 一 不 小 心 就 会 适得其反 。 想 要 抓 住 人 们 的 
浏览 习惯 其 实 很 简单 ， 只 要 想 想 周围 的 人 都 关注 的 共同 东西 就 明白 了 。 
充分 分 析 竞 争 对 手 : 平时 多 看 看 竞争 对 手 的 网 站 项 目 ， 总 结 出 他 们 的 优 缺 点 ， 避 开 对 手 的 优势 
项 目 ， 以 他 们 的 不 足 为 突破 口 ， 这 样 才 会 吸引 更 多 的 浏览 者 注意 。 也 就 是 说 ， 要 把 竞争 对 手 的 
劣势 转换 为 自己 的 优势 ， 然 后 突出 展现 给 浏览 者 看 ， 这 一 点 在 网 站 设计 中 更 易 实施 。 


用 户 体 验 内 容 概述 一 全 


用 户 体验 一 般 包 含 四 个 方面 : 品牌 (Branding)、 使 用 性 (Usability)、 功 能 性 (Functionality) 和 内 容 
(Content)。 一 个 成 功 的 设计 方案 必定 在 这 四 个 方面 充分 考虑 ， 使 用 户 可 以 便捷 地 访问 到 自己 需要 的 内 
容 的 同时 ， 又 在 不 知 不 觉 中 接受 了 设计 本 身 要 传达 的 品牌 和 内 容 。 


就 像 提 起 手机 ， 人 们 就 想起 苹果 ， 提 起 洗 发 水 人 们 就 想起 海飞丝 一 样 ， 品 牌 对 于 任何 一 件 展示 
在 普通 民众 面前 的 事物 有 着 很 强 的 影响 力 。 没有 品牌 的 东西 很 难受 到 欢迎 , 因为 它 没有 任何 质量 保证 。 
同样 对 于 一 个 网 站 来 说 ， 良 好 的 品牌 也 是 其 成 功 的 决定 因素 。 

网 站 是 不 是 有 品牌 取决 于 两 个 要 素 : 是 不 是 独一无二 的 、 是 不 是 最 有 特点 或 者 内 容 最 丰富 的 ， 
如 图 1-9 所 示 。 


(网 站 品牌 。 ”)=( 独一无二 的 类 型 ”) + ( 内 容 丰 富 ， 更 新 及 时 ) 
图 1-9 


网 站 的 独一无二 很 好 解释 ， 假 如 这 个 行业 只 有 你 一 个 网 站 ， 那 么 就 算 选择 的 关键 词 相当 冷门 
就 算 用 户 不 多 ， 但 对 于 这 个 行业 也 是 品牌 。 假 如 网 站 相对 其 他 同类 网 站 来 说 内 容 最 丰富 ， 信 息 更 新 
最 快 ， 那 么 就 是 最 成 功 的 。 这 两 点 对 于 树立 网 站 品牌 是 非常 重要 的 ， 归 根 结 底 一 句 话 就 是 你 的 网 站 
是 不 是 能 够 吸引 浏览 者 。 
此 外 ,视觉 体验 对 于 品牌 价值 的 提升 也 是 很 有 影响 的 。 例 如 , 索尼 有 一 款 平民 化 的 数码 单反 相机 " 阿 
尔 法 300”， 这 款 相 机 虽然 价格 低廉 ， 但 是 索尼 公司 却 将 这 款 相机 的 官方 网 站 设计 得 高 贵 典 雅 , 让 人 
一 眼 就 觉得 这 样 一 款 相机 一 定 是 上 万 元 的 好 机 子 ， 但 实际 上 这 款 相机 售 价 只 有 三 千 多 元 ， 这 就 是 视觉 
体验 对 于 品牌 价值 的 提升 。 这 一 点 在 网 页 设计 上 也 是 通用 的 。 网 页 设计 的 优 劣 对 于 人 们 是 不 是 能 记 住 
你 的 网 站 有 非常 重要 的 作用 , 而 且 适 当 使 用 图 片 、 多 媒体 , 对 于 网 站 也 是 很 有 帮助 的 , 如 图 1-10 所 示 。 


© 


图 1-10 
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2. 使 用 性 


在 浏览 网 站 时 ， 偶 尔 会 遇 到 浏览 器 标题 栏 下 显示 “网 页 上 有 错误 ”这 样 的 提示 ， 如 图 1-11 
所 示 。 这 种 情况 一 般 不 会 影响 到 网 站 的 正常 浏览 。 但 如 果 错 误 太 大 ， 可 能 直接 影响 到 网 站 的 重要 功 
能 和 使 用 。 这 会 直接 对 网 站 的 品牌 造成 影响 。 


图 1-11 
这 些 错误 有 的 可 能 是 网 站 后 台 程 序 造 成 的 ， 程 序 员 应 该 迅速 解决 ， 以 免 影响 浏览 网 站 的 用 户 体 


验 。 有 些 错误 则 是 由 于 浏览 者 的 错误 操作 引起 的 。 如 果 没 有 相关 的 浏览 引导 方案 ， 会 给 很 多 接触 计 
算 机 不 多 的 浏览 者 一 种 “这 个 网 站 太 难 操作 ”的 错觉 , 会 严重 影响 用 户 体验 , 也 就 是 在 这 样 的 环境 下 ， 
AJAX 应 运 而 生 。 所 以 在 进行 网 站 设计 时 ， 一 定 要 有 用 户 操作 错误 的 预 设 方案 ， 这 样 才 能 更 好 地 提升 


用 户 体验 。 

这 里 所 说 的 功能 性 ， 并 不 是 仅仅 指 网 站 的 界面 功能 ， 更 多 的 是 在 网 站 内 部 程序 上 的 一 些 流程 。 
这 不 仅 对 网 站 的 浏览 者 有 很 大 的 用 处 ， 而 且 对 网 站 管理 员 的 作用 也 是 不 容 忽视 的 。 
站 的 功能 性 包含 以 下 内 容 。 
回 ”网 站 可 以 在 最 短 的 时 间 内 获取 到 用 户 所 查询 的 信息 ， 并 反馈 给 用 户 。 
回程 序 功能 过 程 对 用 户 的 反馈 。 这 个 很 简单 ， 例 如 经 常 可 以 看 到 的 网 站 的 “提交 成 功 ”或 者 收 到 
的 其 他 网 站 的 更 新 情况 邮件 等 。 
回 ”网 站 对 浏览 者 个 人 信息 的 隐私 保护 策略 ， 这 对 于 增加 网 站 的 信任 度 有 很 好 的 帮助 。 
© 
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线 上 线 下 结合 。 最 简单 的 例子 就 是 网 友 聚 会 。 
优秀 的 网 站 后 台 管 理 程序 。 好 的 后 全 程序 可 以 帮助 管理 员 更 快 地 完成 对 网 站 内 容 的 修改 与 更 新 。 


如 果 说 网 站 的 技术 构成 是 一 个 网 站 的 骨架 ， 那 么 内 容 就 是 网 站 的 血肉 了 。 内 容 不 单单 包含 网 站 
中 的 可 读 性 内 容 ， 还 包括 连接 组 织 和 导航 组 织 等 方面 ， 这 也 是 一 个 网 站 用 户 体验 的 关键 部 分 。 也 就 
是 说 网 站 中 除了 要 有 丰富 的 内 容 外 ， 还 要 有 方便 、 快 捷 、 合 理 的 链接 方式 和 导航 。 

综 上 所 述 ， 只 要 按照 用 户 体验 的 角度 量化 自己 的 网 站 ， 一 定 可 以 让 网 站 受到 大 众 的 欢迎 。 


池 用 户 体验 产 出 过 程 “@ 


体验 是 人 的 主观 感觉 。 设 计 体验 要 根据 不 同 的 行业 、 不 同 的 产品 、 产 品 的 不 同 层面 而 进行 不 后 
的 设计 。 设 计 方法 和 设计 过 程 也 不 相同 。 


1. 用 户 体 验 的 生命 周期 模型 


从 用 户 体验 的 过 程 来 说 , 设计 者 总 期 望 体验 是 一 个 循环 的 、 长 期 的 过 程 , 而 不 是 直线 的 、 一 次 性 的 。 


好 的 用 户 体验 能 够 吸引 人 ， 让 人 再 次 来 使 用 ， 并 逐步 形成 忠诚 度 ， 告 知 并 影响 他 们 的 朋友 ;而 不 好 


的 用 户 体验 ， 会 使 网 站 逐渐 失去 客户 ， 甚 至 会 由 于 传播 的 原因 ， 失 去 一 批 潜在 的 客户 。 


用 户 体验 的 生命 周期 如 图 1-12 所 示 。 


用 户 怎样 才能 找到 有 用 信息 ? 


”sy 


© 户 知道 如 何 操作 吗 ? 


@” 
用 户 会 再 次 访问 吗 ? 


用 户 会 向 周围 的 人 推荐 吗 ? 


图 1-12 
网 站 吸引 人 是 用 户 体验 的 第 一 步 ， 网 站 靠 什么 吸引 人 是 用 户 体验 设计 首先 要 考虑 的 问题 。 
通过 明 喻 和 隐喻 的 设计 语义 ， 让 用 户 在 不 看 说 明 书 的 前 提 下 轻松 访问 网 站 ， 进 一 步 熟 悉 网 站 。 
在 用 户 与 网 站 的 交互 过 程 中 ， 用 户 的 感觉 如 何 ， 是 否 满足 生理 和 心理 的 需要 ， 充 分 验证 了 网 站 
的 可 用 性 。 
用 户 访问 该 网 站 后 ， 还 会 继续 使 用 或 放弃 ? 
用 户 是 否 形成 忠诚 度 ， 并 向 其 身边 的 人 推荐 该 站 点 ， 也 是 用 户 体验 设计 的 关键 点 。 


用 户 体验 可 以 分 为 五 个 需求 层次 ， 感觉 需求 一 交互 需求 一 情感 需求 一 社会 需求 一 自我 需求 ， 这 
五 个 需求 层次 是 逐 层 增高 的 。 

1) 感觉 需求 

所 谓 的 感觉 需求 指 的 是 用 户 对 产品 的 五 官 需求 ， 包 括 视觉 、 听 觉 、 触 觉 、 嗅 觉 和 味觉 等 ， 是 对 
产品 或 系统 的 第 一 感觉 。 对 于 网 站 来 说 ， 通 常 只 有 视觉 、 听 觉 和 触觉 三 种 需求 。 

网 站 的 可 用 性 可 以 分 为 外 观 可 用 性 和 内 在 可 用 性 两 种 。 外 观 可 用 性 是 指 一 个 网 站 带 给 浏览 者 的 外 
观感 觉 ， 通 常 涉及 审美 方面 的 问题 ; 而 内 在 可 用 性 指 的 是 传统 意义 上 的 可 用 性 。 外 观 可 用 性 和 内 在 可 
用 性 既 存在 着 不 同 ， 又 有 一 定 的 一 致 性 ， 综 合 处 理 好 这 两 点 的 关系 可 以 使 网 站 具有 更 好 的 用 户 体验 。 
2) 交互 需求 
交互 需求 指 的 是 人 与 网 站 系统 交互 过 程 中 的 需求 ， 包括 完成 任务 的 时 间 和 效率 、 是 否 流畅 顺利 、 
是 否 报错 等 。 网 站 的 可 用 性 关注 的 是 用 户 的 交互 需求 ， 包 括 网 站 页 面 在 操作 时 的 学 习性 、 效 率 性 、 
记忆 性 、 容 错 率 和 满意 度 等 。 交 互 需 求 关注 的 是 交互 过 程 是 否 顺畅 ， 用 户 是 否 可 以 简单 快捷 地 完成 
任务 。 
3) 情感 需求 
情感 需求 指 的 是 用 户 在 浏览 网 站 的 过 程 中 产生 的 情感 ， 例 如 在 网 站 浏览 的 过 程 中 感受 到 互动 和 
乐趣 。 情 感 强调 页 面 的 设计 感 、 故 事 感 、 交 互感 、 娱 乐 感 和 意义 感 。 要 对 用 户 有 足够 的 吸引 力 ， 让 
用 户 产生 持续 关注 的 动力 。 
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必 社 会 需求 

在 满足 基本 的 感觉 需求 、 交 互 需求 和 情感 需求 后 ， 人 们 通常 要 追求 更 高 层次 的 需求 ， 往 往 会 对 
某 一 品牌 或 站 点 情 有 独 钟 ， 希 望 得 到 社会 对 自己 的 认可 。 例 如 越 来 越 多 的 人 选择 在 新 浪 网 上 开通 个 
人 微 情 ， 发 布 个 人 日 志 ， 希 望 以 此 获得 社会 的 关注 。 

5) 自我 需求 

自我 需求 是 网 站 如 何 满足 用 户 自我 个 性 的 需求 ， 包 括 追求 新 奇 、 个 性 的 张扬 和 自我 实现 等 。 对 
于 网 站 设计 来 说 ， 需 要 考虑 允许 用 户 个 性 化 定制 设计 或 者 自 适应 设计 ， 以 满足 不 同 用 户 的 多 样 化 、 
个 性 化 的 需求 。 例 如 网 站 页 面 允 许 用 户 更 改 青 景 颜色 、 背 景 图 片 和 文字 大 小 等 都 属于 页 面 定制 。 

一 个 成 功 的 网 站 必须 包含 三 种 可 用 性 ， 必 须 有 的 、 更 多 且 更 好 的 和 具有 吸引 力 的 ， 如 图 1-13 所 
示 。 这 三 种 可 用 性 都 会 直接 影响 到 浏览 者 的 满意 度 。 


-8 ------ -人 ”优秀 的 设计 


必须 有 的 可 用 性 代表 用 户 希 望 从 网 站 中 获得 的 资讯 内 容 ， 也 就 是 网 站 最 基本 该 具有 的 可 用 性 。 
如 果 页 面 中 没有 出 现 “ 必 须 有 ”的 要 素 ， 就 会 直接 导致 浏览 者 满意 度 下 降 。 更 多 且 更 好 的 可 用 性 对 
用 户 满意 度 具 有 线性 影响 ， 即 这 种 可 用 性 越 高 ， 顾 客 就 越 满 意 。 具 有 吸引 力 的 可 用 性 可 以 使 一 个 网 
站 在 同类 型 站 点 中 脱颖而出 ， 提 供 较 高 的 用 户 满意 度 。 


一 个 网 站 要 想 在 商业 上 获得 成 功 ， 至 少 要 拥有 “必须 有 ”的 可 用 性 。 可 用 性 虽然 不 能 提高 网 站 的 整体 竞争 力 ， 


但 却 是 提高 顾客 满意 度 的 必要 条 件 。“ 更 多 且 更 好 ”的 可 用 性 可 以 使 网 站 与 竞争 网 站 保持 同一 水 平 。“ 具 有 吸引 力 ” 
的 可 用 性 则 是 网 站 从 同类 型 网 站 中 脱颖而出 的 主要 原因 。 


网 站 产品 原型 设计 中 的 用 户 体验 5 ] 


一 般 的 用 户 都 有 网上 购物 的 经 验 ， 首先 登录 购物 网 站 ， 然 后 通过 搜索 引擎 或 者 菜单 引导 找到 需 
要 的 产品 ， 下 单 并 填写 各 种 信息 后 ， 即 可 收 到 预定 的 产品 。 这 个 过 程 由 大 大 小 小 的 决策 组 成 ， 这 些 
决策 彼此 依赖 又 相互 影响 ， 同 时 也 影响 着 用 户 体验 的 各 个 方面 。 

为 了 确保 用 户 在 网 站 上 的 所 有 体验 都 控制 在 意料 之 中 ， 在 网 站 原型 设计 的 整个 开发 过 程 中 ， 要 
考虑 用 户 在 网 站 中 有 可 能 采用 的 每 一 步 的 每 一 种 可 能 性 ， 这 样 可 以 最 大 限度 满足 用 户 的 需求 。 


让 网 站 原型 设计 中 的 用 户 体 验 层面 © 


可 以 把 网 站 原型 设计 的 用 户 体验 工作 分 解 成 五 个 层面 ， 用 来 帮助 设计 师 更 好 地 解决 问题 。 分 别 
是 表现 层 、 框 架 层 、 结 构 层 、 范 围 层 和 战略 层 。 


表现 层 通常 指 的 是 用 户 可 以 直接 看 到 的 内 容 ， 一 般 由 图 片 和 文字 组 成 。 通 过 单 击 图 片 或 文字 执 


行 某 种 功能 。 例 如 进入 新 闻 页 面 或 视频 播放 页 面 ， 如 图 1-14 所 示 。 也 有 一 些 内 容 只 是 作为 展示 使 用 ， 
用 来 说 明 内 容 或 美化 页 面 。 
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图 1-14 


框架 层 主要 用 于 优化 设计 布局 , 以 方便 用 户 快速 、 准 确 地 找到 需要 的 内 容 。 通 常 指 的 是 按钮 表格 、 
照片 和 文本 区 域 的 位 置 。 例 如 ， 在 购物 页 面 中 可 以 轻松 找到 购物 车 的 按钮 ， 如 图 1-15 所 示 。 在 浏览 
相 筹 时 快速 查看 多 张 图 片 。 
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图 1-15 


框架 层 是 页 面 结 构 的 具体 表达 方式 ， 用 来 向 用 户 展示 页 面 内 容 ， 提 高 访问 效率 。 而 用 户 先 访问 
什么 ， 后 访问 什么 ， 访 问 某 个 页 面 后 会 触发 某 个 页 面 怎样 的 交互 效果 ， 则 是 通过 结构 层 完成 的 。 

结构 层 主要 用 来 设计 用 户 如 何 到 达 某 个 页 面 ， 并 在 完成 操作 后 能 去 的 页 面 。 框 架 层 定义 了 导航 
条 上 各 项 的 排列 方式 ， 人 允许 用 户 自 由 选择 浏览 的 内 容 ， 结 构 层 则 决定 了 这 些 内 容 出 现在 哪里 。 


4. 范围 层 


结构 层 确定 了 网 站 不 同 特性 和 功能 的 组 合 方式 ， 而 这 些 特性 和 功能 就 构成 了 网 站 的 范围 层 。 例 
如 ， 在 购物 网 站 有 过 一 次 购物 经 历 后 ， 该 用 户 的 姓名 、 地 址 和 联系 方式 都 被 保存 下 来 ， 以 便 下 次 再 
次 使 用 。 该 功能 是 否 应 该 成 为 网 站 功能 的 一 部 分 ， 就 属于 范围 层 要 解决 的 问题 。 


战略 层 可 以 理解 为 网 站 创建 者 的 战略 目标 。 这 个 目标 包括 网 站 经 营 者 想 从 网 站 得 到 什么 ， 还 包 
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括 用 户 想 从 网 站 得 到 什么 。 对 于 一 般 的 电子 商务 网 站 来 说 ， 战 略 目标 显而易见 : 用 户 希 望 通过 网 站 
购买 商品 ， 而 网 站 想 要 卖 出 它们 。 


和 原型 设计 中 的 用 户 体验 层面 分 析 © 


网 站 原型 设计 中 用 户 体验 的 五 个 层面 包括 战略 、 范 围 、 结 构 、 框 架 和 表现 ， 由 下 向 上 为 网 站 提 
供 了 一 个 基本 的 框架 ， 如 图 1-16 所 示 。 接 下 来 以 这 个 框架 为 基础 继续 添加 完善 内 容 ， 以 获得 更 为 丰 
富 的 用 户 体验 。 
在 每 一 个 层面 中 ， 用 户 要 处 理 的 问题 都 很 具体 。 在 最 低 的 层面 ， 完 全 不 用 考虑 网 站 的 最 终 效果 ， 
只 需要 把 重点 放 在 是 否 满 足 网 站 的 战略 目的 上 。 在 最 高 的 层面 上 ， 则 只 需要 关心 最 终 所 呈现 的 页 
效果 即 可 。 

随 着 层面 的 上 升 ， 设 计 师 要 做 的 决策 会 越 来 越 具体 ， 而 且 要 求 的 内 容 也 会 越 来 越 精 细 。 通 常 每 
个 层面 的 内 容 都 是 根据 它 下 面 的 那个 层面 来 决定 的 。 例 如 ， 表 现 层 由 框架 层 来 决定 ， 框 架 层 则 要 建 
立 在 结构 层 的 基础 上 ， 结 构 层 的 设计 基于 范围 层 ， 范 围 层 要 根据 战略 层 来 制定 ， 如 图 1-17 所 示 。 


下 一 个 层面 上 可 用 的 选择 范围 


图 1-16 图 1-17 
如 果 设 计 师 做 出 的 决定 没有 使 上 下 层面 保持 一 致 ， 项 目 通常 会 偏离 正常 的 轨道 。 这 样 的 后 果 就 
会 造成 开发 日 期 延迟 、 开 发 费用 超支 等 情况 。 而 且 就 算 开发 团队 将 各 种 不 匹配 的 元 素 拼凑 在 一 起 ， 
勉强 上 线 ， 也 不 会 受到 用 户 的 欢迎 。 


在 设计 用 户 体验 时 ， 要 充分 考虑 层面 上 的 这 种 “连锁 效应 ”， 也 就 是 说 在 选择 每 一 个 层面 上 的 内 容 时 ， 都 要 充 
分 考虑 其 下 层面 中 所 确定 的 内 容 。 每 一 个 层面 的 决定 都 会 直接 影响 到 它 之 上 层面 的 可 用 选项 。 


在 设计 的 过 程 中 ,“ 较 低层 面 "上 的 决策 不 一 定 都 必须 在 设计 “ 较 高 层面 " 之 前 做 出 。 在" 较 高 层面 " 
中 的 决定 优势 会 促使 对 “ 较 低层 面 ”决策 的 一 次 重新 评估 。 在 每 一 个 层面 ， 都 要 根据 竞争 对 手 所 做 
的 变化 、 行 业 最 佳 的 实践 效果 做 出 修改 。 在 知道 建筑 的 基本 形状 之 前 ， 不 能 先 为 其 盖 一 个 屋 项。 


网 站 产品 原型 设计 中 用 户 体验 的 原则 2 


在 开始 网 站 原型 设计 之 前 ， 首 先 要 经 过 深思 熟 虑 ， 多 参考 同行 的 页 面 ， 汲 取 前 人 的 经 验 教训 ， 
然后 在 纸 上 写 下 来 。 随 着 工作 经 验 的 积累 ， 设 计 、 架 构 、 软 件 工程 以 及 可 用 性 方面 都 会 积累 很 多 有 
益 的 经 验 ， 这 些 经 验 可 以 帮助 我 们 避免 犯 前 人 所 犯 的 错误 。 

创建 原型 设计 时 ， 可 以 通过 遵守 以 下 10 个 原则 ， 以 获得 好 的 用 户 体验 。 

让 标志 引导 设计 © 
对 于 一 个 刚刚 进入 网 站 的 用 户 ， 为 了 确保 能 够 找到 他 们 感 兴趣 的 内 容 ， 通 常 需要 了 解 
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方面 的 内 容 。 


1. 他 们 身 在 何 处 


首先 通过 醒目 的 标识 以 及 一 些 细小 的 设计 提示 来 指示 位 置 。 例 如 ，Logo 图 标 提醒 访问 者 正在 浏 
览 哪 一 个 网 站 ， 也 可 以 通过 面包 局 轨迹 或 一 个 视觉 标志 ， 告 诉 访问 者 处 于 站 点 中 的 位 置 。 当 然 简 明 
的 页 面 标题 ， 也 是 指出 浏览 者 当前 浏览 什么 页 面 的 好 方法 ， 如 图 1-18 所 示 。 


醒目 的 标识 本 
面包 局 轨迹 一 lr > mame mn > ame >， 


2. 他 们 要 寻找 的 内 容 在 哪里 


在 设计 网 站 导航 系统 时 ， 要 问 问 自己 : “访问 这 个 网 站 的 人 究竟 想 要 得 到 什么 ” ”还 要 进一步 
考虑 “希望 访问 者 可 以 快速 找到 哪些 内 容 ? ”如 图 1-19 所 示 。 确 认 了 这 些 问题 并 将 它们 呈现 在 页 面 
上 ， 会 对 提高 用 户 体验 的 满意 度 有 很 大 帮助 。 
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简明 的 页 面 标题 


图 1-18 
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3. 怎样 才能 得 到 这 些 内 容 

“怎样 才能 得 到 ? ”可 以 通过 巧妙 的 导航 设计 来 实现 。 将 类 似 的 链接 分 组 放 在 一 起 ， 并 给 出 清 
晰 的 文字 标签 。 通 过 特殊 的 设计 ， 例 如 下 画 线 、 加 粗 或 者 特效 字体 使 其 看 起 来 是 可 以 单 击 的 ， 以 起 
到 良好 的 导航 作用 。 


4. 他 们 已 经 找 过 哪些 地 方  “》 

这 一 点 通常 是 通过 区 分 链接 的 “过 去 ”和 “现在 ”状态 来 实现 。 要 显示 出 被 单 击 过 的 链接 ， 这 
种 链接 被 称 为 “已 访问 链接 ”。 通 常 的 做 法 是 将 访问 过 的 链接 设置 一 种 新 的 颜色 ， 用 来 保证 用 户 不 
在 同一 区 域 反 复 寻 找 。 
;2 设置 期 望 并 提供 反馈 全 

用 户 在 网 页 上 单 击 链接 、 按 下 按钮 或 者 提交 表单 时 ， 并 不 知道 将 出 现 什么 情况 。 这 就 需要 设计 
者 为 每 一 个 动作 设 定 相应 的 期 望 ， 并 清楚 地 显示 这 些 动作 的 结果 。 同 时 ， 时 刻 提醒 用 户 正 处 在 过 程 
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中 的 阶段 也 很 重要 。 
例如 ， 在 淘宝 网 站 上 购物 时 ， 如 果 将 鼠标 指针 移动 到 按钮 上 悬 停 ， 会 出 现 单 击 后 将 出 现 的 页 面 
提示 ， 这 种 效果 可 以 很 好 地 满足 用 户 的 期 望 ， 如 图 1-20 所 示 。 


颜色 分 类 Pp 


数量 1 LI 件 “库存 1231 件 


服务 承诺 ”起 值 包 邮 内 电 到 家 全 国联 保 正品 保证 支付 方式 v 
朴 深 退 款 民运 妇 险 七 天 无 理由 退换 


图 1-20 


有 时 候 用 户 必须 等 待 一 个 过 程 完成 ， 而 这 可 能 会 耗费 一 些 时 间 。 为 了 让 用 户 知道 这 是 由 于 他 们 的 计算 机 运行 太 
慢 造成 的 这 种 等 待 ， 可 以 通过 提示 信息 或 动画 提醒 用 户 ， 以 避免 用 户 由 于 等 待产 生 焦虑 。 


和 :2 基于 人 类 工程 学 设计 


浏览 网 站 的 用 户 数 以 亿 计 ， 每 个 人 的 情况 都 不 相同 ， 为 了 使 这 些 用 户 的 体验 保持 一 致 ， 在 设计 
页 面 的 时 候 也 要 充分 考虑 人 体 器 官 : 手 、 眼 睛 和 耳朵 的 感受 。 

例如 ， 根 据 大 多 数 人 都 是 右手 拿 鼠 标的 习惯 ， 为 页 面 右 侧 增加 一 些 快速 访问 的 导航 。 针 对 眼睛 
进行 设计 时 ， 要 考虑 到 全 盲 、 色 盲 、 近 视 和 远视 的 情况 。 设 计 网 站 时 ， 要 确认 网 站 的 主题 客户 是 视 
力 极 佳 的 年 轻 人 ， 还 是 视力 模糊 的 老年 人 ， 然 后 确定 网 站 中 的 文字 大 小 。 针 对 耳 灯 进行 设计 时 ， 不 
仅 要 考虑 到 蕉 人 ， 还 要 考虑 到 人 在 嘲 杂 环境 中 倾听 的 情况 ， 保 证 背景 音乐 不 会 让 上 网 的 人 感到 厌烦 。 


:页面 元 素 保持 一 致 一 个 


一 致 的 标签 和 设计 给 人 一 种 专业 的 感觉 。 在 设计 页 面 时， 首先 要 明确 你 的 网 站 有 哪些 约定 ， 想 
打破 这 些 常规 一 定 要 三 思 而 行 。 然 后 还 要 通过 事先 制定 的 样式 指南 约束 设计 师 ， 以 确保 设计 风格 保 
持 一 致 ， 如 图 1-21 所 示 。 


二 提供 纠 错 渠道 © 


为 了 避免 用 户 在 浏览 网 站 时 出 现 不 能 处 理 的 错误 ， 从 而 产生 悲观 情绪 ， 可 以 在 页 面 中 设计 预防 、 
保护 和 通知 功能 。 


1 
大 


首先 是 通过 在 页 面 中 添加 注释 ， 明 确 地 告诉 用 户 选择 的 条 件 和 要 求 ， 避 免 出 现 错误 。 例 如 用 户 
的 注册 页 面 。 也 可 以 通过 添加 暂 存 功 能 保护 用 户 的 信息 ， 例 如 E-mail 的 保存 草稿 功能 。 当 用 户 在 操 
作 时 出 现 错误 时 ， 要 及 时 以 一 种 客观 的 语气 明确 地 告诉 用 户 发 生 了 什么 状况 ， 并 尽力 帮助 用 户 恢复 
正常 。 例 如 未 能 正确 输入 用 户 信息 ， 如 图 1-22 所 示 。 


去 哪儿 


大 RE 账号 注册 


SS 国家 /地 区 | 中 国 86 = 


再 “图 长 度 为 8-30 个 字符 a 
〇 建议 向 数字 、 字 母 、 符 号 组 成 
和 @ 不 家 与 注册 手机 号 相同 


了 靠 机 器 辨识 而 非 人 力 记忆 

对 于 互联 网 上 的 用 户 来 说 ， 大 多 数 人 的 记忆 是 不 可 靠 的 。 大 量 的 数据 如 果 只 通过 记忆 保存 是 很 
难 实现 的 。 在 设计 页 面 时 ， 可 以 通过 计算 机 擅长 的 记忆 功能 帮助 用 户 记忆 。 例 如 用 户 登录 后 的 用 户 
名 和 搜索 过 的 内 容 ， 通 过 滚动 的 功能 将 多 个 用 户 的 多 个 信息 记忆 ， 以 便 用 户 查找 ， 如 图 1-23 所 示 。 
将 记忆 的 压力 转嫁 给 计算 机 ， 用 户 对 你 的 网 站 的 体验 感受 就 会 更 胜 一 筹 。 


罗拉 音乐 视频 图 片 贴吧 地 图 


ke 原型 设计 工具 
a 原型 设计 工具 axure 
新 浪 搜 当 web 原型 设计 工具 ! 
微 博 加 爱 原型 设计 软件 隋 
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原型 设计 视频 
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图 1-23 


1 9 7 | 考虑 到 不 同 水 平 的 用 户 © 


首先 应 该 正确 理解 用 户 ， 用 户 是 一 个 随时 间 而 变化 的 真实 的 人 ， 他 会 不 断 改 变 和 学 习 。 你 的 设 
计 应 该 有 助 于 用 户 自我 提升 ， 达 到 一 个 让 他 满意 的 级 别 。 帮 助人 们 上 升 到 自己 更 觉 理想 的 程度 ， 并 
不 需要 用 户 都 成 为 专家 。 

例如 ， 淘 宝 网 站 针对 不 同 的 用 户 采用 了 不 同 的 操作 界面 ， 同 时 又 提供 了 丰富 的 辅助 工具 ， 帮 助 
新 用 户 购物 或 管理 店铺 ， 老 用 户 则 可 以 完善 美化 店铺 ， 获 得 更 好 的 销量 。 


5 二 提供 上 下 衔接 文档 一 @ 
用 户 在 完成 某 个 可 能 很 复杂 的 任务 时 ， 不 可 人 避免 地 需要 帮助 ， 但 往往 又 不 愿 请 求 帮助 。 作 为 设 


二 
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计 者 ， 要 做 的 就 是 在 适当 的 时 候 以 最 简单 的 方式 提供 适当 的 帮助 。 

设计 者 应 当 把 帮助 信息 放 在 有 明确 标注 的 位 置 ， 而 不 要 全 部 都 放 到 无 所 不 包 的 Help 之 下 。 例 如 
为 首次 登录 网 站 页 面 的 用 户 制 作 一 个 简单 的 索引 页 面 ， 引 导 用 户 快速 进入 网 站 ， 找 到 需要 的 内 容 ， 
如 图 1-24 所 示 。 


帮助 用 户 
第 一 时 间 
了 解 网 站 
功能 


本 
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| mn 
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图 1-24 


了 号 争取 特性 展示 0, 


现代 网 站 设计 通常 由 设计 者 的 方法 引导 用 户 的 视觉 吸引 力 ， 例 如 大 按钮 的 视觉 效果 等 。 但 是 从 
设计 的 角度 来 说 这 些 元 素 实 际 上 不 是 一 件 坏事 。 相 反 ， 这 样 的 指导 方针 是 非常 有 效 的 。 他 们 可 以 带 
领 游客 通过 用 户 友 好 的 方式 ， 进 入 一 个 非常 简单 的 网 站 ， 如 图 1-25 所 示 。 


VIPKID 四 Kp 3 
在 线 少儿 英语 2 


六 大 优势 


a 一 FRR 
图 1-25 


让 用 户 清楚 地 看 到 功能 是 可 用 的 ， 是 一 个 成 功 的 用 户 界 面 设 计 的 基本 原则 。 它 是 如 何 实现 的 这 
并 不 重要 ， 重 要 的 是 网 站 内 容易 于 理解 、 浏 览 者 感到 舒适 和 它们 与 系统 交互 的 方式 。 


很 多 设计 师 在 做 内 容 页 的 时 候 ， 可 能 需要 将 一 篇 特别 长 的 文章 放 到 网 站 中 ， 这 就 使 网 站 中 文章 


两 侧 均 为 空白 ， 这 时 很 多 设计 师 就 会 在 文章 两 边 添加 一 些 相关 文章 以 及 最 新 文章 的 列表 ， 如 图 1-26 
所 示 。 

其 实 真 的 很 难 忽略 留 白 的 重要 性 。 它 不 仅 帮助 用 户 减少 阅读 负荷 ， 还 可 以 帮助 用 户 感知 信息 的 
呈现 方式 。 当 一 个 新 的 访问 者 进入 网 站 时 ， 他 想 做 的 第 一 件 事 应 该 是 在 最 快 的 时 间 内 找到 他 最 想 要 
的 内 容 ， 如 图 1-27 所 示 。 
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图 1-26 图 1-27 


网 站 产品 原型 设计 流程 5 


产品 经 理 其 实 都 知道 ， 在 这 样 一 个 看 重 颜 值 的 时 代 ， 一 个 赏心悦目 的 网 站 ( 或 者 移动 App) 是 多 
么 重要 。 每 一 个 产品 经 理 , 也 都 希望 自己 创造 出 来 的 产品 是 与 众 不 同 的 。 好 的 产品 需要 一 个 好 的 开端 ， 
而 产品 原型 设计 流程 也 是 至 关 重 要 的 ， 如 图 1-28 所 示 。 


i si -> 一 


图 1-28 


加 ”需求 大 纲 : 首先 产品 经 理 与 客户 沟通 过 后 ， 需 要 先 列 需求 大 纲 ， 尽 可 能 使 用 简短 的 话 把 需求 六 
述 清楚 ， 然 后 把 主要 流程 梳理 明确 ， 使 用 任意 记录 软件 或 者 纸张 都 可 以 。 

加 页面 结 构 : 使 用 XMind 罗列 产品 页 面 结构 图 ， 这 部 分 工作 主要 是 让 设计 师 清楚 地 掌握 有 多 少 个 
页 面 ， 以 及 页 面 间 的 父子 层级 关系 ， 确 定 功能 重要 性 和 开发 优先 级 。 

加 竞 品 比 对 : 不 着 急 开 始 画 原型 ， 一 般 设 计 师 会 把 AppStore 和 应 用 市 场 相关 的 竞 品 都 下 载 ， 仔 细 
地 看 这 些 竞 品 是 怎么 设计 的 ， 页 面 布局 是 怎样 的 ， 怎 样 处 理 不 同 功能 之 间 的 联动 ， 版 本 迭代 中 
的 功能 上 线 优先 级 之 类 的 。 这 里 记 住 ， 千 万 不 要 截图 ， 就 是 广泛 地 看 ， 去 体验 、 去 理解 、 去 思 
考 背 后 设计 的 初衷 。 

加 ”信息 结构 : 开始 梳理 信息 结构 ， 比 如 首页 分 为 几 个 区 域 ， 每 个 区 域 放 哪些 元 素 ， 采 用 什么 布局 
方式 等 。 简 而 言 之 ， 搞 清楚 每 个 页 面 都 需要 放 哪些 元 素 ， 使 用 Excel 就 足够 了 。 

日 ”绘制 原型 : 按照 页 面 结构 和 信息 结构 开始 绘制 原型 ， 确 定 每 个 页 面 的 布局 和 元 素 的 位 置 ， 快 速 
地 绘制 原型 初稿 。 这 个 阶段 主要 是 流程 走 通 ， 如 账户 管理 、 发 布 信息 、 搜 索 筛选 之 类 。 

加 ”原型 交互 : 在 原型 初稿 的 基础 上 ， 开 始 深度 思考 功能 的 必要 性 和 优先 级 ， 尽 可 能 把 匈 余 的 元 素 
删除 或 精简 掉 ， 突 出 每 个 页 面 的 重要 元 素 , 使 用 不 同 大 小 的 字体 、 区 域 的 灰 度 来 标识 。 一边 修改 ， 
一 边 添加 交互 细节 ， 可 以 把 细节 用 文字 的 形式 标注 在 原型 周围 。 

名 ”需求 调整 : 使 用 统一 的 原型 标注 表格 ， 将 原来 每 个 页 面 混乱 的 标注 整理 到 表格 中 。 重 点 标识 出 
异常 边界 和 文案 提示 ， 区 分 全 局 说 明和 局 部 说 明 ， 尽 可 能 将 标注 写 得 精简 、 明 确 、 全 面 。 
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， 以 供 演 示 与 开发 。 本 章 将 介绍 


‘Unlock the Marketing 
Power of Music 


初步 了 解 Axure RP p 


Axure RP 是 美国 Axure Software Solution 公司 的 旗舰 产品 ， 是 是 一 款 专业 的 快速 原型 设计 软件 ， 


让 负责 定义 需求 和 规格 、 设 计 功 能 和 界面 的 设计 师 能 够 快速 创建 应 用 软件 或 Web 网 站 的 线 框图 、 


程 图 原型 和 规格 说 明文 档 。 
作为 专业 的 原型 入 计 软件 ，Axure RP 能 快速 并 且 高 效 地 创建 原型 ， 同 时 还 支持 多 人 团队 六 
版 本 控制 管理 ， 如 图 2 1 所 示 。 


a 


Axure RP 是 一 款 专业 的 快速 原型 设计 工具 。Axure 代表 美国 Axure 公司 ，RP 则 是 Rapid Prototyping( 快速 
的 缩写 
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役 计 和 


原型 ) 
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Axure RP 的 下 载 与 安装 5 


在 开始 使 用 Axure RP 8.0 之 前 ， 需 要 先 将 软件 安装 到 本 地 计算 机 中 ， 用 户 可 以 通过 登录 官方 网 
址 下 载 需要 的 软件 版 本 ， 如 图 2-2 所 示 。 


START YOUR 
FREE 30-DAY TRIAL 
"| 


GXUreRP 


官方 下 载 页 面 : http://www.axure.com/download， 进 入 页 面 后 ， 可 以 看 到 MAC 和 PC 两 个 按钮 ， 用 户 可 以 选择 相应 
的 版 本 进行 下 载 。 


2 安装 与 下 载 软件 © 
用 户 在 下 载 页 面 中 单 击 MAC 或 PC 按钮 ， 进 行 Aure RP 软件 的 下 载 ， 下 载 完成 后 ， 下 载 页 面 
如 图 2-3 所 示 。 


不 建议 用 户 去 第 三 方 下 载 软件 , 因为 除了 有 可 能 会 被 捆绑 很 多 垃圾 软件 外 , 还 有 可 能 感染 病毒 。 由 于 Axure RP 8.0 
没有 发 布 中 文 版 本 ， 用 户 可 以 通过 下 载 汉化 版 实现 对 软件 的 汉化 。 


实例 01 一 安装 Axure RP © 


在 开始 使 用 Axure RP 8.0 之 前 ， 需 要 完成 软件 的 安装 。 
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到 在 下 载 文件 夹 中 双击 Axure-setup 文件， 》 源 文件 : 无 
弹出 安装 Axure RP 软件 界面 ， 如 图 2-4 所 示 。 单 击 * 操作 视频 :视频 第 2 章 \ 安 装 Axure RP mp4 
Next 按钮 ， 进 入 License Agreement ( 许可 协议 ) 对 


话 框 ,认真 阅读 协议 后 , 勾 选 "| Agree (我 同意 "选项, yy 


如 图 2-5 所 示 。 | 本 


[| 


图 Seup equirements 


Setup must perform the folowing lasks betore Proceedng wih the Please read the folowing icense agreement. To continue wih setup, 
main phase ofinstalalion you must accept the agieement 
Uninstall Previous Version AXURE SOFTWARE LICENSE 


AGREEMENT 回 
This Axure Software License Agreement is made 


Please close Axure RP before continuing. 


Axure and to Customer and it Permitted Afflliates. 
To coniinue ciick Newt. 


I 


a 
图 2-4 图 2-5 


天 单 击 Next 按 钮 ,进入 Select Destination (选择 安装 位 置 ) 对 话 框 ,如 图 2-6 所 示 。 设 置 安装 地 址 ， 
单 击 Next 按钮 ， 进 入 Program Shortcuts ( 程序 快捷 方式 ) 对 话 框 ， 如 图 2-7 所 示 。 


Instal Folder 
Requied Disk Spacer 


Remaining Disk Space: 


图 2-6 | 图 2-7 
了 继续 单 击 Next 按钮 ， 进 入 完成 安装 向 导 对 话 框 ， 如 图 2-8 所 示 。 再 次 单 击 Next 按钮 ， 进 
入 Updating Your System ( 升级 你 的 系统 ) 对 话 框 ， 开 始 软件 的 安装 ， 如 图 2-9 所 示 。 


况 稍 等 片刻 ， 单 击 Finish( 完成 ) 按钮 ， 即 可 完成 软件 的 安装 ， 如 图 2-10 所 示 。 用 户 会 发 现 软 
件 图 标 已 出 现在 “开始 ”菜单 中 ， 如 图 2-11 所 示 。 
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国 Wizard 


WELCONE 
NE You have suecessiuly complted the Mune AP BSetup wad — 
sin 


园 :es 


图 ssa eworssin en 


Eee 
图 2-10 图 2-11 


加 了 化 及 启动 Axure RP 。” @@ 


下 载 的 汉化 包 和 解压 后 通常 会 包含 一 个 lang 的 文件 夹 ， 如 图 2-12 所 示 。 将 该 文件 夹 直 接 复 制 粘 
贴 到 Axure RP 8.0 的 安装 目录 下 ， 如 图 2-13 所 示 。 重 新 启动 软件 ， 即 可 完成 软件 的 汉化 。 


图 2-12 图 2-13 


汉化 完成 后 ， 用 户 可 以 通过 双击 桌面 上 的 图 标 或 单 击 “ 开 始 ”菜单 中 的 启动 选项 来 启动 软件 ， 
软件 界面 如 图 2-14 所 示 。 


< 
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WELCOME TO AXURE RP 
Ca 一 一 


图 2-14 
通常 在 第 一 次 启动 软件 时 ， 系 统 会 自动 弹出 “管理 授权 ”对 话 框 ， 如 图 2-15 所 示 。 要 求 用 户 输 


入 被 授权 人 和 授权 密码 ， 授 权 密码 通常 是 在 用 户 购买 正版 软件 后 获得 。 如 果 用 户 没 有 输入 授权 码 ， 
则 软件 只 能 使 用 30 天 ，30 天 后 将 无 法 正常 使 用 。 


图 2-15 
Axure RP 工作 界面 简介 只 


相对 于 Axure RP 7.0 来 说 ，Axure RP 8.0 的 工作 界面 发 生 了 较 大 的 变化 ， 精 简 了 很 多 区 域 ， 使 软 
件 变 得 更 简单 、 更 直接 ， 方 便 用 户 使 用 。 界 面 中 各 区 域 如 图 2-16 所 示 。 


菜单 栏 “| 


图 2-16 


Axure RP 的 菜单 栏 p 


菜单 栏 位 于 软件 界面 的 最 顶端 标题 栏 的 下 方 。 按 照 功能 划分 为 9 个 菜单 ， 如 图 2-17 所 示 。 每 个 
菜单 中 包含 同类 的 操作 命令 。 用 户 可 以 根据 要 执行 的 操作 类 型 在 对 应 的 菜单 下 选择 操作 命令 。 


文件 (日 ”编辑 (E) 视图 (V) 项 目 (P) 布局 (A) 发 布 (P) 国 队 Mm 账户 (CO) 帮助 (H) 


Ea 四 “文件 和“ 编辑” 菜 


“文件 ”菜单 下 的 命令 可 以 实现 文件 EN) con 
的 基本 操作 ， 例 如 新 建 、 打 开 、 保 存 和 打 7 sd 2 
印 等 功能 ， 如 图 2-18 所 示 。 ee 
“编辑 ”菜单 下 包含 软件 操作 过 程 中 有 为- 内 Gultshitts 
的 一 些 编辑 命令 ,例如 复制 、 粘 贴 、 全 选 MPG 和 A 
和 删除 等 功能 ， 如 图 2-19 所 示 。 新 建 了 项 目 _ 
打开 国 队 项 目 _(G) > ee 
KR 与 设置 -7) ¥% Wm Ctrl+x 
昌 #7-p) Cap 国 复制 (O Car+C 
Elindex.. Op) Curlty 
index 为 玫 片 -(E) 
导出 所 有 页 可 为 图 片 -(E) 2 CeltF 
各 3] CtrltH 
从 备份 中 你 复 -(C) 全 迁 内 CerltA 
进出 00 Al+F4 | We(0) 
图 2-18 图 2-19 


ZE “视图 " 菜单 ”@ 


“视图 ”菜单 下 包含 与 软件 视图 显示 相关 的 所 有 命令 ， 例 如 工具 栏 、 功 能 区 和 显示 背景 等 功能 ， 
如 图 2-20 所 示 。 


IREM v tIRM) IREM 
3 区 四 让 定义 基本 工具 列表 (C) N EP FE CrtAltl 
重合 视图 R) v ESTRG 二 A) SER) Gori+Akt4] 
这 过 (N) 这 要 (M) v mm 

BF BN Y 寺 

Y 号 人 置 Rd Y ”号 示 村 Rd Vv 旺 

Y 。 显 地 草图 改 果 (S) Y 。 显示 草图 改 果 (G) Y 机 

Y 。 显 元 背景 四) Fe) Y ”和 要 


“项 目 汪 菜单 > 元 件 栏 式 编辑 …(W) 


"项目 ” 菜 单 下 主要 包含 与 项 目 有 关 的 命 本 
令 ， 例 如 元 件 样式 编辑 、 全 局 变量 和 项 目 设 置 
等 功能 ， 如 图 2-21 所 示 。 
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了 “布局 ”东单 一 四 


“布局 ”菜单 下 主要 包含 与 页 面 布局 有 关 的 命令 ,例如 组 合 、 对 齐 、 分 布 和 锁定 等 功能 ， 如 图 
2-22 所 示 。 


| 加 a CrirG 
双喜 于 项 后 CD Crrlt shift+] 
到 加 于 席 后 (QO Crrltshift+[ 
号 上 移 一 层 (D Ca 
了 ”下 移 一 后 (8) Cris[ 
i) 
分 布 (D) » 
入 十 ( 四 
权 术 和 辅助 线 (G) 
转 撞 为 与 版 (M) 
转 接 为 动 术 呵 顶 (D) 
县 注 (P 
CR 川 。 水 平分 布 (H) Ctrl+Shift+H 
生年 全 部 连接 符 (R) PR 
王 ”垂直 分 布 (V) Ctrl+Shift+U 
对 齐 
王 示 网 格 (H) Ctrl 
允 刘 网 格 (9 
网 属 没 置 .-T) 
Y 。 旦 示 会 忆 畏 助 胡 (6) Ctrl+， 
Y 。 显示 页 面 博 助 厂 (p) Ctrl+， 
显示 全 适应 视 舌 辅助 线 ([A) 
时 示 洒 向 畏 助 线 (R) 
FF 贡 二 线 (N) 
席 层 显示 辅助 绕 (8) 
锭 证 瑚 助 线 (L) 
妨 烧 在 标尺 中 显示 位 置 
创建 清 助 线 (CI 
误 除 御 有 辅助 线 (D) 
僵 锁定 位 置 和 尺寸 Ctrl+K 全 人 
Y 入 元 作 (W) 
重新 排序 所 有 痢 注 (R) i 
脚注 锁定 栅 格 和 辅助 线 
图 2-22 
“发布” 菜单 、@ a en . 
5 项-(O) caF5 
“发布 ”菜单 下 主要 包含 与 原型 发 > WAShare..(A) 6 
布 有 关 的 命令 ， 例 如 预览 、 预 览 选项 和 /> 生成 HTML 广 件 .(H) Fe 
生成 HTML 文 件 等 功能 , 如 图 2-23 所 示 。 在 HTML 文 件 中 硬 新 生成 当前 而 (Rj C+F8 
刀 。 生 成 Word 涪 明 书 ..(W) 国 
要 多 生成 器 和 配置 文件 (M) 
图 2-23 


本 证 司 “ 团 队 ” “账户 ”和 “帮助 ”菜单 


“团队 ”菜单 下 主要 包含 与 团队 协作 相关 的 命令 ， 例 如 从 当前 文件 创建 团队 项 目 等 命令 ， 如 
2-24 所 示 。 

在 “账户 ”菜单 下 ， 用 户 可 以 登录 Axure RP 的 个 人 账户 ， 获 得 Axure RP 的 专业 服务 ， 如 
2-25 所 示 。 

“帮助 ”菜单 下 主要 包含 与 帮助 有 关 的 命令 ， 例 如 在 线 培训 教学 和 查找 在 线 帮助 等 命令 ， 如 
2-26 所 示 。 


列 


第 2 章 初 识 AxureRP ， 


从 当前 文件 创 寻 国 从 项 上 (CD) 
(A) 


© MsnB 万 gia) 


开始 演示 动画 …(F) 

在 颖 培训 散 学 .…(O) Fl 
音 找 在 线 帮助 ..(S) 

进入 Axure 论 坛 --( 


提交 章 见 或 软件 错误 .-(B) 


图 2-24 图 


2-25 图 2-26 


Axure RP 8.0 中 的 工具 栏 由 上 半 部 分 的 基本 工具 和 下 半 部 分 的 样式 工具 两 部 分 组 成 ， 如 图 2-27 


所 示 。 


© 
© 
© 
© 
四 剪 切 
© 
© 
© 
© 


: 单 击 即 可 完成 一 个 新 文档 的 创建 。 
: 单 击 即 可 选择 一 个 文档 打开 。 

: 单 击 即 可 将 当前 文档 保存 。 

: 单 击 将 复制 当前 所 选 对 象 到 剪贴 板 
: 单 击 将 剪 切 当前 所 选 对 象 。 

: 单 击 将 剪贴 板 中 的 复制 对 象 粘贴 到 
: 单 击 撤销 最 近 一 步 操作 。 

: 单 击 再 次 执行 前 面 的 操作 。 

: 有 两 种 选择 模式 ， 分 别 是 相交 选中 和 包含 选中 。 相 交 选 中 情况 下 ， 只 要 选取 框 与 对 象 相 


交 即 可 被 选中 ， 如 图 2-28 所 示 。 包含 选 


如 图 


2-29 所 示 。 


中 。 


页 面 中 。 


情况 下 ， 只 有 选取 框 将 对 象 全 部 包含 时 ， 才 能 被 选 d 


图 2-29 


bb 


Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


加 ”连接 : 使 用 该 工具 可 以 将 流程 图 元 件 连接 起 来 ， 形 成 完整 的 流程 图 ， 如 图 2-30 所 示 。 
加 ”钢笔 : 使 用 该 工具 可 以 任意 绘制 想 要 的 图 形 ， 如 图 2-31 所 示 。 


图 2-30 图 2-31 

加 边界 点 : 使 用 “钢笔 工具 ”绘制 图 形 ， 或 将 元 件 转 为 自 定义 形状 后 ， 使 用 该 工具 可 以 完成 对 图 
形 锚 点 的 调整 ， 获 得 更 多 的 图 形 效果 。 

加 切割 : 使 用 该 工具 可 以 完成 元 件 的 切割 操作 。 当 鼠标 变 为 刀 柄 形状 时 ， 用 户 可 根据 自己 的 需求 

任意 切割 ， 如 图 2-32 所 示 。 


图 2-32 
加 ”裁剪 : 当选 中 对 象 为 图 像 时， 使 用 该 工具 缩减 裁剪 框 ， 出 现 “ 裁 前 ”“ 剪 切 ”“ 复 制 ”“ 取 消 ” 
选项 ， 如 图 2-33 所 示 。 


图 2-33 


第 2 章 初 识 AxureRP | 


EE 


裁剪 剪 切 复制 粘贴 
图 2-33( 续 ) 
加 ”连接 点 : 使 用 该 工具 可 以 调整 元 件 默认 的 连接 位 置 ， 如 图 2-34 所 示 。 
Oo O 〇 
[e) [e) [e) 
oO [9) © 
图 2-34 
加 ”格式 刷 : 使 用 该 工具 可 以 快速 地 将 设置 好 的 样式 指定 给 特定 对 象 或 全 部 对 象 ， 如 图 2-35 所 示 。 
四 sa 一 be em 
migi 全 IE 一 = 
图 2-35 
加 缩放: 在 此 下 拉 列 表 中 ， 用 户 可 以 选择 视图 的 缩放 比例 ， 以 查看 不 同 缩放 比例 下 的 文件 效果 。 
加 顶层: 当 页 面 中 同时 有 2 个 以 上 的 元 件 时 ， 可 以 通过 单 击 该 按钮 ， 将 选中 的 元 件 移动 到 其 他 元 
件 项 部 。 
加 底层 : 当 页 面 中 同时 有 2 个 以 上 的 元 件 时 ， 可 以 通过 单 击 该 按钮 ， 将 选中 的 元 件 移动 到 其 他 元 
件 底部 。 
加 ”组合 : 同时 选中 多 个 元 件 ， 单 击 该 按钮 ， 可 以 将 多 个 元 件 组 合成 一 个 元 件 参 与 制作 。 
人 @ ”取消 组 合 : 单 击 该 按钮 可 以 取消 组 合 操作 ， 组 合 对 象 中 的 每 一 个 元 件 将 变 回 单个 对 象 。 
@ ”对齐 : 同时 选中 2 个 以 上 对 象 ， 可 以 在 该 下 拉 列 表 中 选择 不 同 的 对 齐 方式 对 齐 对 象 ， 如 图 2-36 
所 示 。 
@ 分布: 同时 选中 3 个 以 上 对 象 ， 可 以 在 该 下 拉 列 表 中 选择 水 平分 布 或 垂直 分 布 ， 如 图 2-36 所 示 。 


keza 


网 页 设计 ” 网 页 设计 
. PP < 
村 a : | 
【 原型 设计 2 . 原型 设 
: BD 


左右 居中 对 齐 垂直 分 布 
图 2-36 
加 锁定 : 单 击 该 按钮 ， 将 锁定 当前 选中 对 象 。 锁 定 对 象 不 再 参与 除 选中 以 外 的 其 他 任何 操作 。 
名 ”取消 锁定 : 单 击 该 按钮 ， 将 取消 当前 选中 对 象 的 锁定 状态 。 
加 左 : 单 击 该 按钮 ， 将 隐藏 /显示 视图 中 左 侧面 板 。 按 快捷 键 Cl+Alt+[ 也 可 以 快速 地 隐藏 /显示 
视图 左 侧面 板 ， 如 图 2-37 所 示 。 


Be er Ee 
2 I 


二 一 
加 


原型 设计 


网 页 设计 


原型 设计 


交互 设计 | 


图 2-37 


四 右 : 单 击 该 按钮 ， 将 隐藏 / 显示 视图 中 右 侧 面板 。 按 快捷 键 Ctri+Alt+] 也 可 以 快速 地 隐藏 /显示 
视图 右 侧 面板 ， 如 图 2-38 所 示 。 


EE on |: 
Sal :| = 
原型 设计 ， 


原型 设计 
交互 设计 


i 


图 2-38 
预览 : 单 击 该 按钮 ， 将 自动 生成 HTML 预览 文件 。 
共享 : 单 击 该 按钮 ， 将 自动 将 项 目 发 布 到 Axure Share 上 ， 获 得 一 个 Axure 提供 的 地 址 ， 以 在 不 
同 设备 上 测试 效果 ， 如 图 2-39 所 示 。 

四 发布: 单 击 该 按钮 ， 将 弹出 与 “发布 ”菜单 相同 的 菜单 ， 如 图 2-40 所 示 。 用 户 可 根据 需求 选择 


司 
命令 。 


OO 


轩 发 太 到 Axure share 
| 全 了 Es 
We | HTML 1 etaun -3 日 预 帮 (p) F5 
加 创建 一 个 新 项 目 
| pas 预览 法 项 .(O) Ctrl+F5 
m [7 于 会 。 发布 到 AxShare.…(A) F6 
文件 实 | ( 主 宇 ) 
OO Update an existing project 《</》 生成 HTML 文 件 ...(H) F8 
项 目 D 
在 HTML 文 件 中 重新 生成 当前 页 面 (R) Ctrl+F8 
已” 生成 Word 说 明 书 ..(W) m9 
[rT [mr 更 多 生成 器 和 配置 文件 (M) 


2 di A By 


图 2-39 


图 2-40 


加 ”登录 : 单 击 该 按钮 ， 将 弹出 “登录 ”对 话 框 ， 如 图 2-41 所 示 。 用 户 可 以 选择 输入 邮箱 和 密码 登 


录 或 者 重新 注册 一 个 新 账号 。 


样式 工具 


i 


| 


图 2-41 


a 知识 链接 : 
样式 工具 主要 是 为 了 方便 元 件 样式 设置 的 。 具 体 功 能 将 在 本 书 的 第 4 章 中 详细 介绍 。 
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作 区 被 面板 包围 的 排列 方式 。 


上 面板 © 


在 Axure RP 8.0 中 一 共 为 用 户 提供 了 5 个 功能 面板 ， 分 别 是 “页 面 ” 
和 “概要 ”。 上 默认 情况 下 ， 这 5 个 面板 分 为 2 组， 分 别 排列 于 视图 


Axure RP 的 面板 和 工作 区 位 于 工具 栏 的 下 侧 ， 从 左 到 右 分 别 是 面板 、 工 作 


的 两 侧 ， 如 图 2-42 所 示 。 


区 和 面板 ， 形 成 了 工 
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图 2-42 
四 页面: 在 该 面板 中 可 以 完成 有 关 页 面 的 所 有 操作 ， 如 图 2-43 所 示 。 例 如 新 建 页 面 、 删 除 页 面 和 


查找 页 面 等 。 
四 元 件 库 : 在 该 面板 中 保存 着 Axure RP 8.0 的 所 有 元 件 ， 如 图 2-44 所 示 。 用 户 还 可 以 在 该 面板 中 
完成 元 件 库 的 创建 、 下 载 和 载 入 。 
加 母 版 : 该 面板 用 来 显示 页 面 中 所 有 的 母 版 文件 ， 如 图 2-45 所 示 。 用 户 可 以 在 该 面板 中 完成 各 种 
有 关 母 版 的 操作 。 


v mm DmQ cE pn = Q wx EE Dm 
4 门 index Detault - 
ee i 有 
D page3 pe i 
BD | 四 
mE 正片 点 位 符 
rw E2 umon 
H1 H2 H3 - 
图 2-43 图 2-44 图 2-45 
加 ”检视 : 该 面板 中 的 内 容 会 根据 当前 所 选 内 容 而 发 生 改 变 , 如 图 2-46 所 示 。 该 面板 是 Axure RP 8.0 


中 最 重要 的 面板 ， 大 部 分 的 元 件 效果 和 交互 都 在 该 面板 中 完成 。 
四 ”概要 : 该 面板 中 主要 显示 当前 面板 中 的 所 有 元 件 ， 如 图 2-47 所 示 。 用 户 可 以 很 方便 地 在 该 面板 
中 找到 元 件 并 对 其 进行 各 种 操作 。 


四 容 疯 -3EHE (3) D 
wm 

v 图 shapes 3 

选择 形状 可 x Xx 震 要 : 页 面 TQ 
交互 村 式 设 和 D mdex 

A 总 标 是 停 GER) 

中 鲁 标 过 下 吕 (EB) 

时 运 中 呈 矩形 ) 

天 朋 前 量 片 ) 

引用 Ri 画 aa (图片 ) 

图 2-46 图 2-47 


在 面板 名 称 上 单 击 ， 即 可 实现 面板 的 展开 和 收缩 ， 如 图 2-48 所 示 。 这 样 便 于 用 户 在 不 同情 况 下 
最 大 化 地 显示 某 个 面板 ， 便 于 操作 。 拖 动 面板 组 的 边界 ， 可 以 任意 调整 面板 的 宽度 ， 获 得 个 人 满意 
的 视图 效果 ， 如 图 2-49 所 示 。 

a bE] mal|- ELE a es OE ni 
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paoes ~ 至 元件 自 = = 

pe ES2 js 站 四 Bee 
( 4 [Be] 
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元 忻 库 三 - 
碧 名 Ql" BM DQ 
图 2-48 图 2-49 


每 个 面板 的 左上 角 都 有 一 个 “弹出 ”图 标 曲 ， 单 击 该 图 标 ， 即 可 将 该 面板 弹出 为 浮动 状态 。 浮 
动 后 的 面板 在 左上 角 出 现 “停靠 ” 肘 和 “关闭 ” 医 两 个 图 标 。 单 击 “ 停 靠 ”图 标 ， 面 板 则 恢复 到 初始 
位 置 。 单 击 “ 关 闭 ” 按 钮 ， 则 会 关闭 当前 面板 。 这 样 的 操作 ， 可 以 使 用 户 获得 更 为 自由 的 工作 界面 。 

关闭 后 的 面板 如 果 想 要 再 次 显示 ， 用 户 可 以 通过 执行 “视图 ”> “功能 区 ”命令 ， 在 子 菜单 中 选 
择 想 要 显示 的 面板 即 可 ， 如 图 2-50 所 示 。 


项 目 (P) 布局 (A) 发 布 (P) 国 队 (T) 账户 (C) 帮助 (H) 


工具 栏 » 
IEP RR ， 开关 左 仙 功能 栏 ( Ctrl+Akt+[ 
重 置 视图 (R) 开关 右 侧 功能 栏 (R) Ctrl+Akt+] 
让 军 (M) "jv 7 天 
Y 。 显示 脚注 Y 元件 库 
XY” 显示 位 置 Rd Y ， 母 版 
Y 。 显示 草图 效果 (S) Y 检视 
YY 显示 背景 (8) Y 概要 
图 2-50 
2 工作 区 《区 
工作 区 是 Axure RP 8.0 创建 原型 的 地 方 。 当 用 户 新 建 一 个 页 面 后 ， 在 工作 区 的 左上 角 将 显示 页 


面 的 名 称 ， 如 图 2-51 所 示 。 如 果 用 户 同时 打开 多 个 页 面 文件 ， 则 工作 区 将 以 卡片 的 形式 将 所 有 页 面 
排列 在 一 起 ， 如 图 2-52 所 示 。 


= 


图 2-51 图 2-52 


单 击 页 面 名 即 可 快速 切换 到 当前 页 面 中 。 通过 拖 动 的 方式 , 可 以 调整 页 面 显 示 的 顺序 。 单 击 页 面 名 右 侧 的 其 图 标 ， 
将 关闭 当前 文件 。 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


当 页 面 过 多 时 ， 用 户 可 以 通过 单 击 工作 区 右上 角 的 “选择 与 管理 标签 ”按钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 命令 ， 执 行 关闭 标签 、 关 闭 全 部 标签 、 关 闭 其 他 标签 和 跳 转 到 其 他 页 面 的 操作 ， 如 图 2-53 
所 示 。 


page3 
pagel 
图 2-53 


自 定义 工作 界面 D 


每 个 用 户 的 操作 系统 都 不 相同 ，Axure RP 8.0 为 了 照顾 到 所 有 用 户 的 操作 习惯 ， 人 允许 用 户 根据 个 
人 喜好 自 定义 工具 栏 和 工作 面板 。 


自 定义 工具 栏 一 全 
工具 栏 由 “基本 工具 ”和 “样式 工具 ”两 部 分 组 成 。 执 行 “ 视 图 ”> “工具 栏 ”命令 ， 取 消 对 应 
菜单 前 面 的 选择 ， 即 可 将 该 工具 隐藏 ， 如 图 2-54 所 示 。 
项 目 (P) 布局 (A) 发 布 (P) 团队 (D) 账户 (C) 帮助 (H) 


工具 栏 D "| vV 基本 工具 
功能 区 (P) 自 定 义 基本 工具 列表 
重 秆 视图 (R) Y ”本 I 具 


图 2-54 
实例 02 一 一 自 定义 工作 列表 
> 源 文件 : 无 

* 操作 视频 : 视频 \ 第 2 章 \ 自 定义 工作 列表 .mp4 

文件 纺 放 对 齐 绕 例 发 布 

新建 科 开 / 嘱 存 YY 控 放 ~ 对齐 YY 十 定 预览 
开发 者 为 使 用 者 提供 了 自 定义 ee 2 Re 
工作 区 的 功能 。 上 > Pao Ng 

加 执行 "视图 ”> "工具 vi vv 许 层 a v 左 2 

栏 ”>“ 自 定义 基本 工具 列表 ” ss ee pin We ee 
命令 ， 弹 出 如 图 2-55 所 示 的 “| wm 2 二 
对 话 框 。 其 中 显示 在 工具 栏 上 se Y me RD 
的 工具 都 显示 为 被 选中 状态 。 5 i 

让 同 一 标 下 方 到 示 广 本 | DONE | 


[EH 


第 2 章 初 识 AxureRP ， 


Selectitems to customize your tooluar 


文件 纺 放 对 齐 氢 定 发 布 


vv 各 在 v mk YY 对 开 v 合十 v 瑞 蜗 
~ 号 捉 芝 加 中 贴 TU) Y 取 湛 铠 定 v 共享 
~ 摧 多 /至 阁 本 左右 居中 (C) HTML 
vv 页 屋 i 

工具 上 区 一 层 ) 视图 vv 发 布 
ve vv 庄 司 和 vv 二 
v 过 放 8- 是 v 右 于 
v 各 笔 v 有 -由 

边 办 点 站 全 分 而 

[ Ms 分 布 

i Ne 水 分布 (H) 

EE 委 直 9 布 W) 

ba 
更 多 

克 图 果 下 方 旺 示 广 本。 | DoWe 


图 2-55 


三 用 户 可 以 根据 个 人 的 操作 习惯 ,取消 或 者 勾 选 工具 选项 ， 自 定义 工具 栏 , 单 击 DONE 按钮 ， 
自 定义 效果 如 图 2-56 所 示 。 


网 取 清 义 选 “图 标 下 方 显 示 文本 ” 复 选 框 ， 则 工具 栏 上 工具 下 方 将 不 再 显示 文本 ， 工 具 栏 尼 
示 效 果 如 图 2-57 所 示 。 
ed | | 网 SY 


图 2-56 图 2-57 


ec 自 定义 工作 面板 @ 


用 户 也 可 以 通过 执行 “视图 ”>“ 功 能 区 ”命令 ， 选 择 需要 显示 的 面板 ， 如 图 2-58 所 示 。 具 体 
的 操作 方法 ， 已 经 在 前 面 讲 过 ， 此 处 不 再 更 述 。 

用 户 可 以 执行 “视图 ”> “ 重 置 视 图 ”命令 ， 如 图 2-59 所 示 。 将 操作 造成 的 混乱 视图 重 置 为 最 
初 的 界面 布局 。 重 置 后 的 视图 将 恢复 到 默认 视图 状态 。 


项 目 (P) 布局 (A) 发 布 (P) 团队 (D 账户 (GO 帮助 (H) 


开关 左权 功能 栏 
FE Cui+Al+] 这 哩 MI) 
| 2 Y 显示 脚注 () 
Y 元 件 库 = 
| 7 Y ”显示 位 置 尺 十 () 
Y 袜 杭 显示 草图 效果 (S) 
| Y ”要 Y 显示 背景 (8) 
图 2-58 图 2-59 


使 用 Axure RP 的 帮助 资源 ?2 


用 户 在 使 用 Axure RP 8.0 软件 的 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 “帮助 ”菜单 解答 ， 如 图 
2-60 所 示 。 

初学 者 可 以 执行 “在 线 培训 教学 ”命令 ， 进 入 Axure RP 8.0 的 教学 频道 ， 跟 着 网 站 视频 学 习 软 
件 的 使 用 ， 如 图 2-61 所 示 。 执 行 “ 查 找 在 线 帮助 ”命令 来 解决 一 些 操作 中 遇 到 的 问题 。 执 行 “ 进 入 
Axure 论坛 ”命令 可 以 快速 加 入 Axure 大 家 庭 ， 与 世界 各 地 的 Axure 用 户 分 享 软件 使 用 的 心得 。 


kez 
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QXUre 
同学 .O) sumrogr | Owenwew comeTawnc naraowe 
坦 抠 在 线 帮助 --(S) TRAINING AND SUPPORT 


检查 更 新 …(C) 
关于 Axure RP… 
大 放 


图 2-60 图 2-61 
用 户 在 使 用 中 如 果 遇 到 一 些 软 件 错 误 , 或 者 提出 一 些 建议 , 可 以 执行 "提交 意见 或 软件 错误 "命令 ， 
在 “提交 反馈 ”对 话 框 中 填写 相关 信息 ， 如 图 2-62 所 示 。 将 意见 和 错误 发 送 给 软件 开发 者 ， 共 同 提 
高 软件 的 稳定 性 和 安全 性 。 
执行 “打开 欢迎 界面 ”命令 ， 可 以 再 次 打开 “欢迎 界面 ”对 话 框 ， 方 便 用 户 快速 创建 和 打开 文件 ， 
如 图 2-63 所 示 。 
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Axure RP 的 主要 功能 p 


使 用 Axure RP， 可 以 在 不 写 任何 一 条 HTML 和 JavaScript 语句 的 情况 下 ， 通 过 创建 文档 以 及 相 
关 条 件 和 注释 ， 一 键 生成 HTML 演示 页 面 。 具 体 来 说 用 户 可 以 使 用 Axure RP 完成 以 下 功能 。 


DO1I| 绘制 网 站 结构 图 恒 


Axure RP 8.0 可 以 快速 绘制 树 状 的 网 站 构架 图 ， 而 且 可 以 让 构架 图 中 的 每 一 个 页 面 节点 直接 连接 
到 对 应 网 页 ， 如 图 2-64 所 示 。 
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图 2-64 


2 绘制 网 页 示意 图 @ 


Axure RP 8.0 内 建 了 许多 会 经 常 使 用 到 的 元 件 ， 例 如 按钮 、 图 片 、 文 字面 板 、 选 择 钮 、 下 拉 式 
菜单 等 。 使 用 这 些 元 件 可 以 轻松 地 绘制 各 种 示意 图 ， 如 图 2-65 所 示 。 


Create, review and deploy code together 


am 


毕 十 全 


GitLob CE GitLab EE GitLab.com 


图 2-65 


ee 绘制 流程 图 


Axure RP 8.0 中 提供 了 丰富 的 流 


程 图 元 件 ， 用 户 可 以 很 容易 地 绘制 出 


流程 图 ， 轻 松 地 在 流程 图 之 间 加 入 连 Ey 
线 并 设 定 连接 的 格式 ， 2_66 mg eg 一 
有 Eg 加 


Sb Ee 
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区 实现 交互 设计 “人 N26 


在 Axure RP80 中 ， 可 以 模 ee | 
拟 实际 操作 中 的 交互 效果 。 通 过 使 i A | 
用 “用 例 编辑 ”对话 框 中 的 各 项 动 me | Firma En 
作 ， 快 速 地 为 元 件 添加 一 个 或 多 Sr | Fl 导 
个 事件 产生 动作 ， 包 括 OnClick、 ee ] 全 5 | 
OnMouseOver 和 OnMouseLeave | 四 
等 ， 如 图 2-67 所 示 。 ES 
本 CJ ww ] 
图 2-67 
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-原型 输出 © 


Axure RP 8.0 可 以 将 线 框图 直接 输出 成 符合 Internet Explorer 或 Firefox 等 不 同 浏览 器 的 HTML 
项 目 。 

Axure RP 8.0 可 以 输出 Word 格式 的 文件 ， 文 件 包含 目录 、 网 页 清单 、 网 页 和 附 有 注解 的 原版 、 
注释 、 交 互 和 元 件 特定 的 资讯 ， 以 及 结尾 文件 (例如 : 附录 )， 规 格 的 内 容 与 格式 也 可 以 依据 不 同 的 
阅读 对 象 来 变更 。 


这 页 面 设置 与 自 适 应 视图 ，p 


使 用 欢迎 界面 5 


双击 Axure RP 8.0 图 标 ， [EC 一 -| 
启动 后 会 自动 弹出 欢迎 使 © enonenrne abn ME | Ea sa | :ss | 
软件 界面 ， 如 图 3-1 所 示 。 - : 
在 该 页 面 中 用 户 可 以 通过 单 转 
击 “ 新 建文 件 ” 按 钮 ， 新 建 WELCOME TO AXURE RP 
一 个 Axure 文件 。 单 击 “ 打 


开 文 件 ” 按 钮 ， 打 开 一 个 .mp 
格式 的 文件 , 再 次 编辑 修改 。 


A 二 >> XH Facebook >> 
pa 人 >>， 7 wer>> 
es EE 
图 3-1 


对 话 框 的 左 侧 中 间 部 分 
显示 了 最 近 操作 的 5 个 文件 ， RP 
. rt WELCOME TO AXURE RP | AceesREaxn 
人 出 头 = 上 从 了 A 习 A Www.axure com .cn 
“练习 资料 ”， 帮 助 用 户 快 一 一 - ER 
速 掌握 软件 的 使 用 。 用 户 也 [sses eev | 最 近 打开 文件 
可 以 通过 访问 Axure 论坛 、 更 多 资源 
Axure 博客 和 Axure 支持 ， 
获得 更 多 的 资源 ， 如 图 3-2 
所 示 。 


练习 资料 


关注 乔 科 Twitter > 


不 再 显示 关闭 


9 选 “不 再 显示 ” 复 选 框 ， 下 次 启动 Axure RP 8.0 时 ， 欢 迎 界面 将 不 会 显示 。 执 行 “帮助 ”>“ 打 开 欢 迎 界面 " 
| 命令 ， 即 可 再 次 打开 该 页 面 


新 建 和 设置 Axure RP 文件 5 


在 开始 创建 原型 之 前 ， 首 先 要 创建 一 个 新 文 
件 ， 确 定 原型 的 内 容 和 应 用 领域 ， 这 样 才能 保证 
最 终 成 型 的 原型 设计 的 准确 性 。 不 了 解 清楚 用 途 
就 贸然 开始 制作 ， 浪 费时 间 不 说 ， 还 会 造成 不 可 
预 估 的 损失 。 
除了 通过 软件 欢迎 界面 新 建文 件 外 ， 用 户 还 FR. Ne 


可 以 通过 执行 “文件 ” >“ 新建 ”命令 或 者 单 击 PNR- 
工具 栏 上 的 “新 建 ”按钮 ， 完 成 文件 的 新 建 ， 如 
图 3-3 所 示 。 国 33 


二 纸张 尺寸 与 设置 全 
此 命令 是 Axure RP 8.0 新 增 的 功能 ， 用 圈 纸 张 RU 与 设置 


来 帮助 用 户 更 加 方便 快捷 地 设置 文件 尺寸 
和 属性 。 执行 “文件 ”>“ 纸 张 尺寸 与 设置 ” 


命令 ， 即 可 打开 “纸张 尺寸 与 设置 ”对话 框 ， | ss， i 
如 图 3-4 所 示 。 2 一 
方向 : 人 图 纵向 〇 横向 


bE : 上 I10 下 (0 | 左 |10 | 有 |10 
像素 尺寸 : 。 突 度 686 | 高度 1000 


图 3-4 


纸张 尺寸 : 用 户 可 以 从 下 拉 列 表 中 选择 预 设 的 纸张 尺寸 ， 也 可 以 通过 选择 “ 自 定义 ”选项 ， 手 
动 输 入 自 定义 尺寸 ， 如 图 3-5 所 示 。 

宽度 / 高 度 : 用 来 显示 新 建文 档 的 尺寸 ， 也 可 用 来 输入 自 定义 的 纸张 宽 、 高 尺寸。 

单位 : 选择 英寸 或 毫米 作为 宽 、 高 、 页 边 距 使 用 的 测量 单位 。 

方向 : 选择 竖 向 或 横向 的 纸张 朝向 。 

页 边 距 : 指定 纸张 上 、 下 、 左 、 右 方向 上 的 外 边 距 值 ， 如 图 3-6 所 示 。 

像素 尺寸 : 指定 每 个 打印 纸张 的 像素 尺寸 。 

设 为 默认 : 将 当前 尺寸 设置 为 默认 尺寸 ， 下 次 新 建文 件 时 自动 显示 。 


ooocoocooece © 


轿 0KRIS8E = 区 本 | 
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实 度 : | Letter 
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十 页 动 下 
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第 3 章 页 面 设置 与 自 适应 视图 


像素 尺寸 将 自动 保持 宽 高 比 ， 其 宽 高 比 将 适 配 为 打印 纸张 尺寸 减 去 页 边 距 后 的 宽 高 比 。 


ED 


执行 “文件 ” >“ 保存 "命令 , 弹出 “另存 为 ”对 话 框 , 如 图 3-7 所 示 。 输入 “文件 名 ”, 选择 “ 保 
存 类 型 ”后 ， 单 击 “ 保 存 ” 按钮 ， 即 可 完成 文件 的 保存 操作 。 

当前 文件 已 经 保存 过 了 ， 再 执行 “文件 ”>“ 另 存 为 ”命令 ， 即 可 弹出 “另存 为 ”对 话 框 ， 如 
图 3-8 所 示 。“ 另 存 为 ”命令 通常 是 为 了 获得 文件 的 副本 ， 或 者 重新 开始 一 个 新 的 文件 。 


国 新 是) Cu+N 
也 打开 ..(0) ctd+O 
打开 局 扩编 的 文件 (R) » 
国 保存 (S) Ctrl+S 
ee - 从 RP 文 件 导入 -四 
图 3-7 图 3-8 
在 制作 原型 过 程 中 ， 一 定 要 做 到 经 常 保存 ， 避 免 由 于 系统 错误 或 软件 错误 导致 软件 关闭 ， 造 成 


不 必要 的 损失 。 


用 户 也 可 以 单 击 工具 栏 上 的 “保存 ”按钮 或 者 按 下 快捷 键 Ctl+S 实现 对 文件 的 保存 ， 按 下 快捷 键 Cul+Shift+S 实 


现 另存 为 操作 。 


< 启动 和 回复 自动 备份 ”@ 


为 了 保证 用 户 不 会 因为 计算 机 死机 或 软件 崩溃 等 问题 未 保存 ， 而 造成 不 必要 的 损失 ，Axure RP 
8.0 为 用 户 提供 了 “自动 备份 ”的 功能 。 


实例 03 一 使 用 自动 备份 核 复数 据 。”( 人 @) 


该 功能 与 Word 中 的 自动 》 源 文件 . 无 
保存 功能 一 样 ， 会 按照 用 户 设 操作 视频 ， 视频 \ 第 3 章 \ 使 用 自动 备份 恢复 数据 .mp4 
定 的 时 间 自 动 保存 文档 。 i 

DD 执行 “文件 * >:“ 自 如 中 二 天 玉手 
动 备份 设置 ”命令 ， 弹 出 “ 备 “一 一 人 一， | meme va Per 
份 设置 ”对 话 框 ， 如 图 3-9 所 示 。 勾 选 “ 启 | seaez2 a 
用 备份 ” 复 选 框 ， 即 可 启动 自动 备份 功能 。 在 | zesatvsa pros em | 
“备份 间隔 ”文本 框 中 输入 希望 间隔 保存 的 时 | zws 273 poe 

em | 
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名 执行 "文件 >“ 从 备份 中 恢复 ”命令 ， 在 弹出 的 “从 备份 中 恢复 文件 ”对 话 框 中 设置 文 
件 恢复 的 时 间 点 ， 如 图 3-10 所 示 。 选 择 自动 备份 日 期 后 ， 单 击 “ 恢 复 ”按钮 ， 即 可 完成 文件 的 恢复 
操作 。 


图 aodeaxt LE 
旦 示 文 件 范围 : 是 近 5 | 天 建议 优 使 用 新 文件 名 保存 恢复 的 文件 ， 以 渤 免 要 差 人 最 近 保 存 的 文件 . 
2018/3113 17-3157 未 命名 mp 
2018/3113 15:42.53 未 命名 p 
2018/3/13 15.2123 未 命名 _recovered mp 
2018/3/13 15.0623 未 命名 _recoveredp 
2018/3113 14.5123 未 命名 _recovered mp 
2018/3113 121737 未 命名 mp 
2018/3113 121737 未 命名 mm 
2018/3113 12.0237 趟 会 名 
2018/3113 120237 未 命名 mp 
2018/3113 11:47-37 未 命名 由 
2018/3113 11:47:36 趟 命名 ” 
| 
图 3-10 


如 果 用 户 在 操作 过 程 中 软件 出 现 意外 ,需要 恢复 自动 备份 时 的 数据 ， 可 以 执行 上 面 的 操作 。 


2 使 存 格式 (@ 


Axure RP 支持 3 种 文件 格式 ， 分 别 是 RP 文件 格式 、RPPRJ 文件 格 
式 和 RPLIB 文件 格式 。 不 同 的 文件 格式 使 用 方式 不 同 。 
加 RP 文件 格式 : RP 文件 格式 是 指 单一 用 户 模式 ， 是 设计 师 使 用 
Axure 进行 原型 设计 时 创建 的 单独 的 文件 ， 是 Axure 的 默认 存储 文 
件 格式 。 以 RP 格式 保存 的 原型 文件 ， 是 作为 一 个 单独 文件 存储 在 
本 地 硬盘 上 的 。 这 种 Axure 文件 与 其 他 应 用 文件 ， 如 Excel、Visio 
和 Word 文件 完全 相同 ， 文 件 图 标 如 图 3-11 所 示 。 图 3-11 
介 RPPRJ 文件 格式 : RPPRJ 文件 是 指 团 队 协 作 的 项 目 文件 ， 通 常用 


于 团队 中 多 人 协作 处 理 同一 个 较为 复杂 的 项 目 。 不 过 ， 自 己 制作 复 
杂 的 项 目 时 也 可 以 选择 使 用 团队 项 目 ， 因 为 团队 项 目 允 许 随时 查看 


恢复 到 任意 的 历史 版 本 。 
日 ”RPLIB 文 件 格式 : RPLIB 文件 是 指 自 定义 元 件 库 模式 ， 该 文件 格式 
用 于 创建 自 定 义 的 元 件 库 。 用 户 可 以 到 网 上 下 载 Axure 元 件 库 使 用 ， 
也 可 以 自己 制作 自 定义 元 件 库 并 将 其 分 享 给 其 他 成 员 使 用 ， 文 件 图 
标 如 图 3-12 所 示 。 关 于 元 件 库 的 使 用 ， 将 在 本 书 的 第 4 章 中 详细 图 3-12 
介绍 。 


新 建 Axure RP 8.0 文件 后 ， 软 件 将 自动 为 用 户 创建 4 个 页 面 ， 包 括 1 个 主页 和 3 个 二 级 页 面 ， 
用 户 可 以 在 “页 面 ”面板 中 查看 ， 如 图 3-13 所 示 。 


第 3 章 页 面 设置 与 自 适应 视图 | 


本 i 每 个 页 面 都 有 一 个 名 字 ， 为 了 便于 查找 制作 ， 用 户 可 以 
PR 为 页 面 重新 指定 名 称 。 选 择 页 面 ， 在 该 页 面 名 上 单 击 ， 即 可 
De 重 命名 该 页 面 。 


为 页 面 命 名 时 ， 每 一 个 名 字 应 该 都 是 独一无二 的 ， 而 且 页 面 的 名 
字 要 可 以 清晰 地 说 明 每 个 页 面 的 内 容 ， 这 样 原型 才 更 容易 被 理解 。 


图 3-13 


志 添加 和 删除 页 面 @ 


在 Axure RP 中 ， 开 发 者 为 使 用 者 提供 了 方便 管理 各 种 页 面 的 “页 面 ”面板 。 在 “页 面 ”面板 上 ， 
用 户 可 以 任意 添加 和 删除 页 面 。 


实例 04 一 为 文件 创建 和 币 除 页 面 。 ( 作 ) 


默认 情况 下 ， 一 个 新 站 
7] * 源 文件 : 无 
的 文件 包含 4 个 页 面 ， 想 和 区 寺 让 * 操作 视频 视频 第 3 章 \ 为 文件 创建 和 删除 页 面 .mp4 
要 创建 新 的 页 面 时 ， 需 要 六 
用 户 在 “页 面 " 面板 上 单 i 中 
击 “ 添 加 页 面 ” 按 钮 ， 或 一 D poge! 
者 选中 某 个 页 面 单 击 鼠 标 右键 后 ， 在 弹出 bm RE 
的 快捷 菜单 中 选择 相应 的 命令 。 各 动 (M) +| 扰 上 0) 
名 iD) 鲁 下 方 添加 页 面 (A) Ctrl+Return 
重 命名 (R) EE 了 nO 
重复 (O) 站 到 
| 二 
生成 流入 图 | 
到 如 果 用 户 需 要 添加 页 面 , 可 以 单 击 “页面” x x mm [ek] 
面板 右上 角 的 “添加 页 面 ”按钮 ， 即 可 完成 页 面 4 D index 一 一 
的 添加 ， 页 面 效果 如 图 3-14 所 示 。 D peget 
到 为 了 方便 对 页 面 的 管理 ， 通 常会 将 同类 有 
型 的 页 面 放 在 一 个 文件 夹 下 ， 单 击 “ 页 面 ”面板 
右上 角 的 “添加 文件 夹 ”按钮 ， 如 图 3-15 所 示 。 
即 可 完成 文件 夹 的 添加 ， 如 图 3-16 所 示 。 
图 3-14 
kw x 页 面 区 区 IT 让 外 
4 [| index 4 0D index 
D page1 D page1 
D page2 可 文件 来 
口 page3 口 page2 
口 page3 
图 3-15 图 3-16 
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天 用户 如 果 希 望 在 特定 的 位 置 添加 页 面 或 文件 来， 可 以 首先 在 “页 面 ”面板 中 选择 一 个 页 面 ， 
然后 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 ”下 的 命令 ， 如 图 3-17 所 示 ， 即 可 完成 添加 。 


x mm Da 
4 0 index 
D page1 
D pege2 
口 pag ET "| 团 “文件 夫人 Ctrl+ Shift+Return 
移动 (M) ?| 纺 上 方 添加 页 面 (8) 
sO) 守 下 方 添 jn 页 面 ) Ctrl+Return 
重 命名 (R) | 了 OO 
Efe] om 
图 志 关 型 ( 
生成 流程 图 
图 3-17 
码 用 户 如 果 想 要 删除 某 个 页 面 ， 可 以 首先 选择 想 要 删除 的 页 面 ， 按 下 键盘 上 的 Delete 键 即 可 
完成 删除 操作 。 也 可 以 在 文件 上 单 击 鼠标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 “删除 ”命令 ， 即 可 完 


成 删除 ， 如 图 3-18 所 示 。 
创建 不 同 的 页 面 可 选择 以 下 选项 。 

加 文件 夹 : 将 在 当前 文件 下 创建 一 个 文件 夹 。 

日” 上 方 添 加 页 面 : 将 在 当前 页 面 之 前 创建 一 个 
页 面 。 

日 下方 添 加 页 面 : 将 在 当前 页 面 之 后 创建 一 个 

© 


页 面 。 
子 页 面 : 将 为 当前 页 面 创建 一 个 子 页 面 。 


2 移动 下 面 @ 


用 户 如 果 想 移动 页 面 的 顺序 或 更 改 页 面 的 RE 
级 别 ， 可 以 首先 在 “页 面 ”面板 上 选择 需要 更 | moex 
改 的 页 面 ， 然后 单 击 鼠 标 右键 ， 选 择 “ 移 动 " ed 
下 的 子 命令 即 可 ， 如 图 3-19 所 示 。 D pams 


日 上 移 : 将 当前 页 面向 上 移动 一 层 。 

日 下 移 : 将 当前 页 面向 下 移动 一 层 。 

自 降级: 将 当前 页 面 转换 为 子 页 面 。 

日 升级: 将 当前 子 页 面 转 换 为 独立 页 面 。 
除了 可 以 使 用 “移动 ”命令 改变 页 面 的 层 

次 外 ， 用 户 可 以 按 下 鼠标 左 键 ， 采 用 直接 拖 动 

的 方法 改变 页 面 的 层次 。 


a2 理 找 页 面 二 


通常 一 个 原型 的 页 面 少 则 几 个 ， 多 则 几 十 个 , 为 了 方便 用 户 在 众多 页 面 中 查找 其 中 某 一 个 页 面 ， 
Axure RP 8.0 为 用 户 提供 了 “查找 ”功能 。 

单 击 “ 页 面 ”面板 右上 角 的 “查找 ”按钮 ， 在 页 面 项 部 出 现 查找 文本 杠 ， 如 图 3-20 所 示 。 输 入 
要 查找 的 页 面 名称 后 ， 即 可 看 到 要 查找 的 页 面 ， 如 图 3-21 所 示 。 


”第 3 章 页 面 设置 与 自 适应 视图 


CE 页 面 到 外 WX 有 马 回回 
4 DD index EA x 
口 功 北面 A 0 ndex 
口 菜单 页 面 口 菜单 页 面 
口 服务 页 面 
口 帮助 页 面 
图 3-20 图 3-21 
再 次 单 击 “ 查 找 ”按钮 ， 将 取消 搜索 ，“ 页 面 ” 面 板 将 恢复 默认 状态 。 


“检视 ” 面板 9 


完成 页 面 的 新 建 后 ， 用 户 在 “页 面 ”面板 中 双击 想 要 编辑 的 页 面 ， 即 可 进入 页 面 的 编辑 状态 。 
默认 状态 下 ， 页 面 显 示 为 背景 色 为 白色 的 空白 页 面 。 用 户 可 以 在 “检视 ”面板 完成 页 面 的 设置 工作 ， 


如 图 3-22 所 示 。 


[7 


Ns 
和 
De Ga > Se 


2 Se ns ms, 


在 页 面 设置 状态 下 ， 
如 图 3-23 所 示 。 


“检视 ”面板 显示 为 “检视 : 


页 面 ”面板 ， 单 击 面板 中 的 “属性 ”选项 卡 ， 


加 启用 至 


图 3-23 


在 “属性 ”选项 卡 下 可 以 设置 页 面 的 各 种 交互 效果 。 页 面 交 互 中 包含 页 面 的 各 种 触发 事件 ， 可 


以 为 页 面 的 触发 时 间 添 加 用 例 ， 来 执行 指定 的 动作 。 
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默认 显示 的 事件 有 “页 面 载 入 时 ”“ 窗 口 尺 寸 改变 时 ”和 “窗口 滚动 时 ”， 如 图 3-24 所 示 。 单 击 
“更 多 事件 ”下 拉 列 表 ， 可 以 看 到 更 多 的 事件 ， 如 图 3-25 所 示 。 


EE EE | 
BE 3 页 面 饼 标 羊 二 对 
v 后 页 面 生 标 双 去 时 
十 到 二 到 页 面 铺 标 右 主 对 
TR mA 页 面包 标 移动 时 
噶 窗口 尺 寺 改变 对 
本 页 面 按键 按 下 时 
页 面 按键 松 开 时 
更 多 事件 >>> ” 
窗口 向 上 滚动 时 
SE 下 有 辑 窗口 向 下 滚动 时 
记 适 应 视图 改变 时 
图 3-24 图 3-25 


三 一 贝 面 说 明 @ 


“检视 : 页面” 面板 中 间 的 选项 卡 是 页 面 说 明 ， 如 图 3-26 所 示 。 页 面 说 明 可 以 在 当前 页 面 添加 
注释 说 明 ， 以 便于 其 他 制作 人 了 解 页 面 内 容 。 
用 其 检视 : 页 面 
= 
目 定 义 主 笃 清除 全 部 
说 明 
图 3-26 


页 面 说明 直 接 在 下 方 的 文本 框 中 输入 内 容 ， 如 图 3-27 所 示 。 单 击 右 侧 的 各 图 标 ， 弹 出 格式 化 
文本 参数 ， 用 户 可 以 设置 说 明文 字 的 字体 、 加 粗 、 斜 体 、 下 画 线 、 文 本 颜色 和 项 目 符号 等 参数 ， 如 
图 3-28 所 示 。 


Ww 检视: 页 面 wx 检 杭 :页 面 
= WEE = WEE 
自 定 义 字 息 洁 队 全 部 县 定义 主角 清除 全 部 
说 明 9 说 明 a 
pp 
页 面 内 容 不 能 为 空 !| 
图 3-27 图 3-28 
如 果 需 要 有 多 个 说 明 ， 可 以 单 击 “ 自 定义 字段 ”文字 ， 在 弹出 的 “页 面 说 明 字 段 ” 对 话 框 中 添 


加 新 的 说 明 ， 如 图 3-29 所 示 。 
添加 完成 后 ， 单 击 “ 确 定 ” 按 钮 ，“ 检 视 : 页 面 ” 面 板 如 图 3-30 所 示 。 用 户 可 以 继续 输入 多 个 


第 3 章 页 面 设置 与 自 适应 视图 ， 


页 面 说 明 。 
过 x 罕 疯 :而 
me 
页 面 内 容 不 能 为 会 ! 站 
用 广 建议 ? | 
图 3-29 图 3-30 


二 内面 样式 @@ 


“检视 : 页 面 ”面板 最 右 侧 的 选项 卡 是 页 面 样式 ， 如 图 3-31 所 示 。 在 这 里 可 以 设置 页 面 的 样式 、 
排列 方式 、 背 景 图 片 和 草图 / 页 面 效 果 。 
[ 
me | 
Default -B® 
TR 国 三 
Re EE 
Wt 办 | 和 
加 名 加 
= 
mE cl, 
El 
国 "3 
图 3-31 


加 ”页面 排列 : 该 项 的 选择 将 影响 最 后 输出 时 页 面 的 排列 方式 ， 用 户 可 以 选择 居 左 或 者 居中 。 

名 ”背景 颜色 : 该 项 可 以 设置 页 面 的 背景 颜色 。 

加 ”背景 图 片 : 该 项 可 以 设置 页 面 的 背景 图 片 。 单 击 “ 导 入 ”按钮 ， 选 择 用 作 背 景 的 图 片 即 可 。 
单 击 “清空 " 按钮 ， 可 以 将 背景 图 片 删除 。 用 户 可 以 设置 背景 图 片 的 重复 方式 和 位 置 , 如 图 3-32 
所 示 。 

| Default” po 
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加 草图 /页面 效果 : 参数 是 针对 页 面 上 的 元 件 的 。 拖 动 草图 控制 轴 ， 可 以 实现 不 同 级 别 的 页 面 效 果 。 
单 币 3]*1 如 按钮 ， 可 以 选择 3 种 不 同 的 线条 粗细 显示 草图 ， 如 图 3-33 所 示 。 


SN ) 
二 


单 击 攻 | 马上 接 钮 ， 可 以 使 页 面 效果 在 彩色 和 黑白 之 间 切 换 。 同 时 可 以 在 下 拉 列 表 中 选择 字体 系列 ， 
使 整个 页 面 字体 转换 为 一 种 字体 ， 以 便 观 察 页 面 草图 效果 。 


辅助 线 和 网 格 的 使 用 D 


为 了 方便 使 用 者 设计 和 制作 原型 ，Axure RP 8.0 开发 者 为 用 户 提供 了 标尺 、 辅 助 线 和 网 格 等 畏 
助 工 具 。 合 理 地 使 用 这 些 工具 ， 可 以 帮助 用 户 及 时 准确 地 完成 原型 设计 工作 。 


“二 辅助 线 的 种 类 @ 


在 Axure RP 8.0 中 , 辅助 线 按照 功能 的 不 同 分 为 “全 局 辅助 线 " "页面 辅 助 线 "“ 自 适应 视图 辅助 线 ” 
和 “打印 辅助 线 ”。 

默认 情况 下 ， 辅 助 线 显示 在 页 面 的 顶层， 如 图 3-34 所 示 。 可 以 通过 执行 “布局 ”>“ 栅 格 和 辅 
助 线 ”> “底层 显 示 辅 助 线 ” 命 令 或 在 页 面 中 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 
线 ” >“ 底层 显示 辅助 线 ”命令 ， 将 辅助 线 显示 在 页 面 的 底层 ， 如 图 3-35 所 示 。 


3 -上 -一 -一 一 全 一 -一 一 一 一 一 

| 

| 

| 

| 

! 

和 -一 -一 一 一 一- 

图 3-34 


了 1 全 局 辅助 线 。》 


全 局 辅助 线 作用 于 站 点 中 的 所 有 页 面 ， 包 括 新 建 页 面 。 将 光标 移动 到 标尺 上 ， 按 住 Ctrl 键 的 同 
时 向 外 拖 扳 ， 即 可 创建 全 局 辅助 线 。 默 认 情况 下 ， 全 局 辅助 线 为 紫红 色 ， 如 图 3-36 所 示 。 


2. 页 面 辅助 线 


将 光标 移动 到 标尺 上 向 外 拖 遇 创 建 的 辅助 线 ， 称 为 页 面 辅助 线 。 页 面 辅助 线 只 作用 于 当前 页 面 ， 
默认 情况 下 ， 页 面 辅助 线 为 青色 ， 如 图 3-37 所 示 。 
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图 3-36 图 3-37 


3. 自 适 应 视图 辅助 线 


自 适 应 视图 辅助 线 只 显示 在 用 户 设置 的 自 适应 视图 中 。 在 “检视 : 页 面 " 面板 的 "属性" 选项 卡 下 ， 
勾 选 "启用 " 自 适 应 复 选 框 , 单 击 “管理 自 适应 视图 " 按钮 , 设置 添加 “ 自 适应 视图 ”, 如 图 3-38 所 示 。 

单 击 “确定 ”按钮 ， 进 入 设置 的 自 适应 视图 中 ， 即 可 看 到 “ 自 适 应 视图 辅助 线 ”， 该 辅助 线 的 
位 置 就 是 设置 的 自 适 应 视图 的 尺寸 位 置 ， 如 图 3-39 所 示 。 


[IE] 下 本 攻 二 | 。 unm * | ssxm - | ze "| ze > ndx . 
二 机 区 3 = [es] 月 ww 
多 ] 四 9 
bg 新 视图 
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图 3-38 图 3-39 


4. 打印 辅助 线 


打印 辅助 线 方便 用 户 准确 地 观察 页 面 效 果 ， 正 确 打印 页 面 。 当 用 户 设置 了 纸张 尺寸 后 ， 页 面 中 
会 显示 打印 辅助 线 。 
默认 情况 下 , 打印 辅助 线 为 隐藏 状态 , 执行 “布局 ”> " 栅 格 和 辅助 线 " > “显示 打印 辅助 线 " 命令， 


> 创建 辅助 线 。 (@ 


在 用 户 设计 原型 图 需要 精确 定位 各 个 元 件 的 大 小 和 位 置 时 ， 可 以 使 用 辅助 线 来 帮助 用 户 ， 下 
讲解 如 何 创建 辅助 线 。 


实例 05 一 辅助 线 的 创建 
手动 拖 卸 的 辅助 线 虽然 便 * 源 文件 : 无 
捷 ， 但 如 果 遇 到 要 求 精度 极 高 的 到 国王 Be 
项 目 时 就 显得 力不从心 了 。 用 户 。 吕 国人 
可 以 通过 “创建 销 助 线 " 命令 创 ” 尘 蛙 5 | 
建 情 准 的 辅助 线 。 时 


名 执行 "文件 >“ 新建” 命令， 
个 页 面 。 执 行 “ 布 局 ”>“ 栅 格 和 辅助 线 ” > “ 创 上 
建 辅助 线 ” 命 令 或 在 页 面 中 单 击 鼠 标 右键 ， 在 弹 上 上 | 
出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ”>“ 创 建 | | | 
辅助 线 ” 命令 ， 如 图 3-42 所 示 。 | 画面 | 
玛 此 时 打开 “创建 辅助 线 ”对 话 框 ， 用 户 T | 
可 以 在 “ 预 设 ”下 拉 列 表 中 选择 “960 Grid: 12 一 一 一 一 一 一 一 :二 
Column” 的 辅助 线 设置 ， 如 图 3-43 所 示 。 一 
玛 义 选 “创建 为 全 局 辅助 线 ” 复 选 框 ， 可 以 使 辅助 线 出 现在 所 有 的 页 面 中 ， 供 团队 的 所 有 成 
员 使 用 ， 如 图 3-44 所 示 。 


| 
| 
| 


T 
I 
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在 对 话 框 中 可 以 直接 输入 数值 来 创建 辅助 线 。 用 户 要 养 成 使 用 辅助 线 的 习惯 ， 既 方便 团队 合作 ， 又 方便 了 在 整 
个 站 点 中 的 不 同 页 面 定位 元 素 。 


= 编辑 辅助 线 @ 


创建 辅助 线 后 ， 用 户 可 以 根据 需求 完成 对 辅助 线 的 编辑 操作 一 一 移动 辅助 线 、 删 除 辅助 线 和 锁 
定 辅助 线 。 


1. 移动 辅助 线 


将 光标 移动 到 辅助 线 上 ， 当 光标 变 成 中 时 ， 按 下 鼠标 左 键 拖 抱 ， 即 可 实现 辅助 线 的 移动 。 需 要 
注意 的 是 ， 自 适应 视图 辅助 线 和 打印 辅助 线 只 有 通过 重新 设置 才能 改变 位 置 ， 不 能 通过 直接 拖 抱 实 
现 移动 效果 。 


2. 删除 辅助 线 


用 户 可 以 单 击 或 拖 息 选中 要 删除 的 辅助 线 ， 按 下 Delete 键 ， 即 可 将 选中 的 辅助 线 删除 。 也 可 以 
直接 选中 辅助 线 拖 息 到 标尺 上 ， 删 除 辅助 线 。 

执行 “布局 ”> “ 栅 格 和 辅助 线 ”> “删除 所 有 辅助 线 ”命令 ， 如 图 3-45 所 示 。 或 在 页 面 中 单 
击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ”>“ 删 除 所 有 辅助 线 ” 命 令 ， 将 页 面 中 所 有 
的 辅助 线 删除 ， 如 图 3-46 所 示 。 


用 户 可 以 在 想 要 删除 的 辅助 线 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “删除 ”命令 ， 即 可 将 当前 所 选 辅助 
线 删 除 。 


3. 锁定 辅助 线 


为 了 避免 辅助 线 移动 影响 原型 的 准确 度 ， 可 以 将 设置 好 的 辅助 线 锁 定 。 

执行 “布局 ”>“ 栅 格 和 辅助 线 ”>“ 锁 定 辅助 线 ”命令 或 者 在 页 面 中 单 击 鼠 标 右键 ， 在 弹出 的 
快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ”> “锁定 辅助 线 ” 命 令 ， 将 页 面 中 所 有 的 辅助 线 锁定 ， 如 图 3-47 
所 示 。 而 再 次 执行 该 命令 ， 将 会 解锁 所 有 辅助 线 。 

为 了 方便 用 户 使 用 辅助 线 , Axure RP 8.0 允许 用 户 为 不 同 种 类 的 辅助 线 指定 不 同 的 颜色 。 执行" 布 
局 "> “ 栅 格 和 辅助 线 ”> “辅助 线 设置 " 命令 或 在 页 面 中 单 击 鼠标 右键 , 在 弹出 的 快捷 菜单 中 选择 “ 栅 
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格 和 辅助 线 ”> “辅助 线 设置 ”命令 ， 弹 出 如 图 3-48 所 示 的 对 话 框 。 


在 该 对 话 框 中 ， 用 户 除了 可 以 选择 显示 或 隐藏 辅助 线 外 ， 还 可 以 设 定 不 同样 式 的 辅助 线 ， 如 
图 3-49 所 示 。 


2 网 格 的 使 用 ”@@ 


使 用 网 格 可 以 帮助 用 户 保持 设计 的 整洁 和 结构 化 。 例 如 设置 网 格 为 10 x 10 像素 ， 然 后 以 10 的 
倍数 为 基准 来 创建 对 象 。 当 把 这 些 对 象 放 在 网 格 上 的 时 候 ， 将 会 更 容易 对 齐 。 当 然 ， 也 人 允许 那些 需 
要 不 同 尺寸 的 特殊 对 象 偏离 网 格 。 

默认 情况 下 ， 页 面 中 不 会 显示 网 格 。 用 户 可 以 执行 “布局 ”>“ 栅 格 和 辅助 线 ”>“ 显 示 网 格 ” 
命令 或 在 页 面 中 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ”> “显示 网 格 ” 命 令 ， 如 
3-50 所 示 。 页 面 中 的 网 格 显示 效果 如 图 3-51 所 示 。 

用 户 可 以 执行 “布局 ”>“ 栅 格 和 辅助 线 ”> “网 格 设置 ”命令 或 在 页 面 中 单 击 鼠 标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ”>“ 网 格 设置 ”命令 ， 然 后 在 弹出 的 “网 格 设置 ”对 话 框 中 设 
置 网 格 的 各 项 参数 ， 如 图 3-52 所 示 。 
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图 3-50 图 3-51 图 3-52 


在 该 对 话 框 中 用 户 除 了 可 以 选择 显示 和 对 齐 网 格外 ， 还 可 以 设置 网 格 之 间 的 间距 、 网 格 的 样式 和 颜色 。 


用 户 可 以 执行 “布局 ”> “ 栅 格 和 辅助 线 ”> “对齐 网 格 ”命令 或 在 页 面 中 单 击 鼠 标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ”> “对 齐 网 格 ” 命 令 ， 如 图 3-53 所 示 。 激 活 “ 对 齐 网 格 ” 命 
令 后 ， 移 动 对 象 时 会 自动 对 齐 网 格 。 
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用 户 可 以 执行 “布局 ”>“ 栅 格 和 辅助 线 ”>“ 对 齐 辅 助 线 ”命令 或 在 页 面 中 单 击 鼠 标 右键 ， 在 
弹出 的 快捷 菜单 中 选择 “ 栅 格 和 辅助 线 ” >“ 对 齐 辅助 线 " 命令 ,如 图 3-54 所 示 。 激活 “对 齐 辅助 线 ” 
命令 后 ， 移 动 对 象 时 会 自动 对 齐 辅助 线 。 
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设置 遮 罩 Dp 


Axure RP 中 提供 了 很 多 特殊 的 元 件 ， 例 如 热 区 、 母 版 、 动 态 面 板 、 中 继 器 和 文本 链接 。 当 用 户 
使 用 这 些 元 件 时 ， 会 以 一 种 特殊 的 形式 显示 ， 如 图 3-55 所 示 。 

当 用 户 想 将 页 面 中 的 元 件 隐藏 时 ， 可 以 选中 页 面 中 的 所 有 元 件 ， 然 后 单 击 鼠标 右键 ， 在 弹出 的 
快捷 菜单 中 选择 “ 设 为 隐藏 ”命令 ， 如 图 3-56 所 示 。 


中 继 器 四 。 动态 面板  。 
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图 3-55 图 3-56 
被 隐藏 对 象 默认 情况 下 以 一 种 半 透明 的 黄色 显示 ， 如 图 3-57 所 示 。 如 果 想 要 显示 元 件 ， 选 中 被 
隐藏 的 所 有 元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 设 为 可 见 ” 命 令 ， 如 图 3-58 所 示 。 
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如 果 用 户 觉得 这 种 遮 罩 效 果 会 影响 操 项 目 (P) 布局 (A) 发布 (P) 国 队 (T) 账户 (CO 帮助 (H 
作 ， 通 过 执行 “视图 ”>“ 遮 罩 ” 命 令 ， 工 上 RE 
选择 对 应 的 命令 ， 即 可 取消 遮 罩 效果 ， 如 功能 区 (P) 
图 3-59 所 示 。 重要 视图 (R) 


|| 友 |[ 导 ||| 起 
; 


图 3-59 


使 用 自 适应 视图 2 


为 了 满足 原型 在 不 同 尺寸 终端 都 能 正常 显示 的 需要 ， 页 面 编辑 区 中 提供 了 自 适应 视图 功能 。 用 
户 可 以 在 自 适应 视图 中 随意 定义 临界 点 ， 临 界 点 是 一 个 屏幕 尺寸 ， 当 达到 这 个 屏幕 尺寸 时 ， 界面 的 
样式 或 布局 就 会 自动 发 生变 化 。 


ee 和 自 适 应 视图 的 作用 ”@ 


早期 的 输出 终端 只 有 显示 器 ， 而 且 屏 幕 的 分 辨 率 基 本 都 是 一 种 或 者 两 种 ， 设 计 师 只 需 基 于 某 个 
特定 的 屏幕 尺寸 进行 设计 就 可 以 了 。 而 随 着 移动 技术 的 快速 发 展 ， 越 来 越 多 的 移动 终端 出 现 了 ， 例 
如 手机 、 平 板 电脑 、 投 影 灯 等 。 而 且 手 机 品牌 的 不 同 ， 显 示 屏 幕 的 尺寸 也 不 相同 ， 如 图 3-60 所 示 。 


图 3-60 
为 了 使 一 个 为 特定 屏幕 尺寸 设计 的 页 面 能 够 适合 所 有 尺寸 的 终端 ， 需 要 对 之 前 所 有 的 页 面 进 行 
重新 设计 ， 还 要 顾及 兼容 性 的 问题 ， 要 投入 大 量 的 人 力 物 力 ， 而 且 后 续 还 要 对 所 有 不 同 屏幕 的 多 套 
页 面 进行 同步 维护 ， 也 是 极 大 的 挑战 。 


自 适应 视图 中 最 重要 的 概念 是 集成 ， 因 为 它 在 很 大 程度 上 解决 维护 多 套 页 面 的 效率 问题 。 其 中 ， 每 套 页 面 都 是 
为 了 一 个 特定 尺寸 屏幕 而 做 的 优化 设计 。 


一 编辑 自 适应 视图 @ 


在 自 适 应 视图 中 的 元 件 从 父 视图 中 集成 样式 ( 如 位 置 、 大 小 ) 。 如 果 修 改 了 父 视图 中 的 按钮 颜色 ， 
则 所 有 的 子 视图 中 的 按钮 颜色 也 随 之 改变 。 但 如 果 改变 了 子 视 图 中 的 按钮 颜色 ， 则 父 视图 中 的 按钮 
颜色 不 会 改变 。 


[Ey 
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在 “检视 : 页 面 ”面板 中 ， 勾 选 “ 启 用 ” 复 选 框 ， 单 击 后 面 的 “管理 自 适 应 视图 ”按钮 ， 或 者 
单 击 工作 区 左上 角 的 “管理 自 适应 视图 ”按钮 ， 如 图 3-61 所 示 。 都 将 弹出 “ 自 适应 视图 ”对 话 框 ， 
如 图 3-62 所 示 。 


ES 区 影响 所 有 视图 
,1 40 Eg Eg 
图 3-61 图 3-62 
单 击 左上 角 的 “+” 按 钮 ， 即 可 添加 一 种 新 视图 ， 新 视图 的 各 项 参数 可 以 在 右 侧 添加 ， 如 图 
3-63 所 示 。 


加” 预 设 ; 根据 宽度 ， 预 先 定义 好 了 一 个 设备 的 显 本 
示 尺寸 ， 用 户 可 以 直接 选用 。 人 
名 ”名称 : 为 当前 自 适应 视图 定义 一 个 名 称 。 = 
加 ”条件 : 定义 临界 点 的 逻辑 关系 。 例 如 当 视 图 宽 Ta 
度 小 于 临界 点 尺寸 时 ， 则 使 用 当前 视图 。 Se 
加“ 宽 : 如果 要 自 定义 一 个 视图 ， 则 可 以 输入 一 个 
宽度 。 
加 高: 如 果 要 自 定义 一 个 视图 ， 则 可 以 输入 一 个 
癌 之 。 Ce lL wa | 
名 “继承 于 : 为 当前 视图 指定 一 个 父 视图 ， 即 确定 二 = 
继承 的 父 视图 。 默 认 都 是 从 基本 视图 中 继承 。 


要 创建 自 适应 页 面 ， 必 须要 从 某 个 目标 页 面 的 视图 中 创建 ， 这 个 目标 视图 称 为 基本 视图 。 


实例 06 一 一 设置 自 适应 视图 


自 适应 视图 可 以 帮 


国 只 法 》 源 文件 ， 素 材 & 源 文件 \ 第 3 章 \ 设 置 自 适应 视图 .rp 
he ee 》 操 作 视频 ， 视频 \ 第 3 章 \ 设 置 自 适应 视图 .mp4 
下 话 ， 感人 少 二 
后 期 开发 的 不 必要 的 一 首 ES ee 一 级 标题 
些 难 题 。 | 全 


加 使 用 各 种 元 件 ， 创 建 如 图 3-64 
所 示 的 页 面 效 果 。 执 行 “ 项 目 ”>“ 自 适 
应 视图 ”命令 ,修改 “名 称 ”为 “手机 纵 
向 ”， 如 图 3-65 所 示 。 
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图 3-64 


图 3-65 


一) 设置 页 面 的 宽 和 高 ， 如 图 3-66 所 示 。 继 续 使 用 相同 的 方式 新 建 其 他 几 个 页 面 设置 ， 如 
图 3-67 所 示 。 


+ 四 Wa | + 力 X Wa | 
手机 内 向 (基本 ) 名 称 | 手机 纵向 手机 纵向 (基本) 名 称 向 
手机 模 向 (480X 任何 以下) 全 手机 模 向 (480x 任何 以 下 ) 医 
区 PM 58x 以 下 ) es 
高 450 所 要 横向 (1024x 任 何以 下 ) 吉 768 
在 浏览 问 中 浏览 原型 时 ， 如 果 没 有 二 中 分 辩 率 杀 高 分 产 率 (1200Xx 任 何以 上 ) 高 [ 
人 a 
| 
图 3-66 图 3-67 
天 单 击 “确定 ”按钮 ， 在 工作 区 项 部 显示 添加 的 页 面 设置 ， 如 图 3-68 所 示 。 
index * 
可 | 手机 纵 <=320 | 56 | 手机 纵 <=320 | 56 | 手机 纵 <=320 了 拖 机 纵 <=-320 | 625 门 和 所 有 视图 
PU 1 js -| A Le 


图 3-68 


码 分 别 单 击 页 面 标签 ， 选 择 进 入 不 同 的 页 面 ， 根 据 全 局 辅助 线 调整 页 面 的 显示 效果 ， 如 
图 3-69 所 示 。 
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图 3-69 


码 设置 完成 后 ， 单 击 工具 栏 上 的 “预览 ”按钮 ， 在 浏览 器 中 浏览 页 面 。 单 击 浏览 器 左上 角 的 


select adaptive view 按钮 ， 选 择 不 同 的 页 面 设置 ， 预 览 页 面 效 果 ， 如 图 3-70 所 示 。 


oe 一 级 标题 


而 人 于 ftoao 4 any and ebowey 


Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Aenean euismod bibendum laoreet. Proin gravida 
dolor sit amet lacus accumsan et viverra justo 
commodo. Proin sodales pulvinar tempor Cum sociis 
natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Nam fermentum, nulla luctus 
pharetra vulputate, felis tellus mollis orci, sed rhoncus 
sapien nunc eget 


图 3-70 
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元 件 是 原型 产品 中 最 基础 的 组 成 部 分 ， 使 用 元 件 可 以 制作 出 丰富 多 彩 的 产品 原型 效果 。 本 章 将 针对 
Axure RP 8.0 ， 掌 握 元 件 的 使 用 方法 和 设置 技巧 ， 并 掌握 元 件 属性 的 设置 


和 样式 的 添加 ， 


了 解 “元 件 ” 面 板 D 


在 Axure RP 中 ， 绘制 原型 的 用 户 界面 元 素 被 称 为 元 件 。 而 元 件 又 被 统一 放 在 “元件 " 面板 中 。 


4.1.1 件 ” 面板 

Axure RP 8.0 的 元 件 都 放 在 “元 件 ” 面 板 中 。 “元 件 ”面板 位 于 软件 窗口 的 左 侧 ， 如 图 4-1 所 示 。 
"元件 ”面板 中 默认 状态 将 元 件 按照 种 类 分 为 基本 元 件 、 表 单元 件 、 菜 单 和 表格 、 标 记 元件 4 种 类 型 ， 
如 图 4-2 所 示 。 


图 4-1 图 4- 
单 击 “元 件 ” 面 板 项 部 的 下 拉 菜 单 ， 有 “选择 全 部 ”、Default( 默认 )、Flow( 流程 图 ) 和 lcons 
赂 标 )4 个 选项 供 选 择 ， 如 图 4-3 所 示 。 

选择 “选择 全 部 ”选项 ， 在 “元 件 ” 面 板 中 将 同时 显示 所 有 的 元 件 分 类 选项 ， 如 图 4-4 所 示 。 
择 Icons( 图 标 ) 选项 ， 则 只 显示 lcons( 图 标 ) 元 件 ， 如 图 4-5 所 示 。 


每 种 类 型 前 有 一 个 箭 和 头 向 右 时 代表 当前 选项 下 有 隐藏 内 容 ， 箭 头 向 下 时 代表 已 经 显示 了 所 有 选项 


En 
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添加 元 件 到 页 面 © 


首先 在 “元 件 ” 面板 中 选择 要 使 用 的 元 件 , 然后 按 住 鼠 标 左 键 不 放 , 拖 动 到 页 面 合适 位 置 后 松 开 ， 
即 可 完成 将 当前 元 件 添加 到 页 面 的 操作 ， 如 图 4-6 所 示 。 
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了 1. 为 元 件 命名 。 》 
一 个 原型 产品 通常 包含 很 多 元 件 。 要 在 众多 元 件 中 查找 其 中 的 某 一 个 是 非常 麻烦 的 。 为 元 件 指 
定名 称 ， 就 能 很 好 地 解决 这 个 问题 。 
当 元 件 拖 入 页 面 中 后 ， 可 以 在 “检视 ”面板 中 为 其 指定 名 称 ， 如 图 4-7 所 示 。 元 件 名 称 尽量 使 
用 英文 或 者 拼音 命名 ， 首 字母 最 好 选择 大 写字 母 ， 更 有 利于 阅读 。 
KR 检视 : 点 位 符 口 R 检视 : 点 位 符 [| 


(SD 


宫 住 说 明 样式 忆 说 明 样式 


图 4-7 


元 件 命名 除了 便于 管理 查找 以 外 ， 在 制作 交互 效果 时 ， 也 方便 程序 的 选择 和 调用 。 


了 2. 缩放 元 件 


将 元 件 拖 入 页 面 中 后 ， 通 过 拖 动 其 四 周 的 控制 点 ， 可 以 实现 对 元 件 的 缩放 ， 如 图 4-8 所 示 。 用 

户 也 可 以 在 项 部 工具 栏 中 精确 修改 元 件 的 坐标 和 尺寸 ， 其 中 x 代表 水 平方 向 ，y 代表 垂直 方向 ，w 代 
表 元 件 的 宽度 ，h 代表 元 件 的 高 度 ， 如 图 4-9 所 示 。 

二 
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号 


用 户 在 移动 、 缩 放 和 旋转 元 件 时 ， 在 其 右 下 角 会 显示 辅助 信息 ， 帮 助 用 户 实现 精确 的 操作 。 


ED 


按 住 Ctrl 键 的 同时 拖 动 控制 锚 点 ， 可 以 任意 角度 地 旋转 元 件 ， 如 图 4-10 所 示 。 用 户 如 果 要 获得 
精确 的 旋转 角度 ， 可 以 在 “检视 ”面板 的 “样式 ”选项 卡 下 设置 ， 如 图 4-11 所 示 。 


pe 
(起 形 名 到 
属性 
位置 * 尺 二 BR 站 
100 220 300 170 
出 妹 。。 y 输 业 妹 突 度 [] 襄 度 
Eee | [aE] 四 区 
Text 
图 4-10 图 4-11 
如 果 元 件 内 有 文字 内 容 ， 用 户 可 以 分 别 为 元 件 和 文字 设置 不 同 的 旋转 角度 ， 如 图 4-12 所 示 。 
x x 检视 :矩形 口 
(起 形 名 静 
= - 
位 置 .尺寸 [ 国 
136 283 155 155 
和 标 。 _y 拍 业 奈 实 度 [] 庄 度 
300 0 "| AS| ln"|| 三 
散 荣 Text 
图 4-12 


4. 设置 元 件 填充 和 不 透明 度 


将 元 件 拖 入 页 面 中 后 ， 用 户 可 以 在 顶部 选项 栏 中 设置 其 “填充 颜色 ”和 “线段 颜色 ”， 如 
图 4-13 所 示 。 
用 户 还 可 以 修改 拾 色 器 面板 底部 的 “不 透明 度 ” 值 ， 实 现 填充 或 线段 的 不 透明 效果 ， 如 图 4-14 
所 示 。 


5. 设置 边框 宽度 、 颜 色 和 类 型 


除了 可 以 设置 元 件 的 颜色 外 ， 用 户 还 可 以 在 选项 栏 中 设置 拖 入 元 件 的 边框 宽度 、 颜 色 和 类 型 ， 


如 图 4-15 所 示 。 
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图 4-13 
w x 检视 : 点 位 符 D 
二 级 菜单 下 的 介绍 
属性 
阴影 
边框 
因 角 半径 
不 通明 
字体 
| 知识 链接 : 
”除了 以 上 所 介绍 的 元 件 操作 外 ， 还 可 以 对 元 件 进行 更 多 的 操作 ， 详 细 内 容 将 在 本 章 的 第 43 | 
， 节 介绍 。 


元 件 的 类 型 只 


Axure RP 中 为 用 户 提供 了 6 种 基础 元 件 , 分 别 是 基本 元 件 、 表 单元 件 、 菜 单 和 表格 元 件 、 标 记 元 件 、 


流程 图 元 件 和 图 标 元 件 。 


I> 基本 元 件 © 


Axure RP 8.0 一 共 提供 了 20 个 基本 元 件 ， 如 图 4-16 所 示 。 


O 4 
本 区 形 国 片 
H3 A 
三 级 标题 文本 标签 
Te 
图 4-16 
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1. 矩形 


Axure RP 8.0 一 共 提供 了 3 个 矩形 元 件 ， 分 别 命名 为 “ 珑 形 1”“ 夭 形 2” 和 “ 德 形 3”。 这 3 
个 元 件 没有 本 质 的 不 同 ， 只 是 在 边框 和 填充 上 略 有 不 同 ， 方 便 用 户 在 不 同情 况 下 选择 使 用 。 

选择 矩形 元 件 ， 拖 动 元 件 左上 和 角 的 黄色 三 角形 ， 可 以 将 其 更 改 为 圆 角 和 矩形， 如 图 4-17 所 示 。 单 
击 圆 角 右上 角 的 圆 点 ， 打 开 形 状 列表 ， 可 以 选择 将 元 件 转换 为 其 他 形状 ， 如 图 4-18 所 示 。 


ll 


人 一 一 一 一 
| : 
图 4-17 
2. 椭圆 形 》 


椭圆 形 元 件 与 矩形 元 件 的 使 用 方法 相同 ， 直 接 将 其 拖 入 页 面 中 ， 即 可 完成 一 个 椭圆 形 元 件 的 创 


建 。 
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Axure RP 8.0 对 图 片 的 支持 是 非常 强大 的 ， 选 择 图 片 元 件 ， 将 其 拖 入 页 面 中 ， 如 图 4-19 所 示 。 
双击 图 片 元 件 ， 在 弹出 的 “打开 ”对 话 框 中 选择 图 片 ， 单 击 “ 打 开 ” 按 钮 ， 即 可 看 到 打开 的 图 片 ， 
如 图 4-20 所 示 。 


有 一 点 需要 注意 ， 打 开 的 图 片 将 以 其 原始 尺寸 显示 ,用 户 可 以 通过 拖 动 边 角 的 控制 锚 点 实现 对 其 的 缩放 操作 。 


拖 动 图 片 左 上 角 的 黄色 三 
角形 ， 可 以 实现 图 片 的 遮 罩 效 
果 ， 实 现 圆 角 图 片 的 效果 ， 如 图 
4-21 所 示 。 
用 户 可 以 直接 在 图 片上 输入 
文字 内 容 ， 如 图 4-22 所 示 。 单 
击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 
中 选择 “编辑 文本 ”命令 ， 可 以 
修改 文本 ， 如 图 4-23 所 示 。 


et 


图 4-22 图 4-23 
在 Axure RP 8.0 中 ， 可 以 使 用 “裁剪 工具 ”对 图 片 进行 裁剪 操作 。 单 击 选项 栏 中 “钢笔 工具 " 
后 的 更 多 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 “裁剪 工具 ”， 拖 动 调整 图 片 边缘 的 边框 ， 在 图 片上 双击 
即 可 完成 图 片 的 裁剪 操作 ， 如 图 4-24 所 示 。 


调 出 裁剪 框 后 ， 工 作 区 右上 角 出 现 一 个 菜单 条 ， 用 户 可 以 根据 需求 选择 不 同 的 选项 。 


占 位 符 元 件 没有 实际 的 意义 , 只 是 作为 临时 占 位 的 功能 存在 。 当 用 户 需要 在 页 面 上 预 留 一 块 位 置 ， 
但 是 还 没有 确定 要 放 什么 内 容 的 时 候 ， 可 以 选择 先 放 一 个 占 位 符 元 件 。 
选择 占 位 符 元 件 ， 将 其 拖 入 页 面 中 ， 效 果 如 图 4-25 所 示 。 
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Lorem ipsum dolor si amet, consectetur adipiscing 
ellt. Aenean euismod bibendum laoreet Proin 
FE gravida dolor sit amet lacus accumsan et viverra 
oe Justo commodo. Proin sodales pulinar tempor. 
Cum sociis natoque penatibus et magnis dis 
- SS pafturient montes. nascetur ridiculus mus. Nam 
一 fermentum, nulla luctus pharetra wlputate, felis 
a ~ tellus mollis orci, sed rhoncus sapien nunc eget. 
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图 4-25 


Axure RP 8.0 为 用 户 提 供 了 3 种 按钮 元 件 ， 分 别 是 “按钮 ”“ 主 要 按钮 ”和 “链接 按钮 ”。 用 户 
可 以 根据 不 同 的 用 途 选择 不 同 的 按钮 。 选 择 按钮 元 件 ， 将 其 拖 入 页 面 中 ， 如 图 4-26 所 示 。 双 击 按钮 
元 件 即 可 修改 按钮 文字 ， 效 果 如 图 4-27 所 示 。 


图 4-26 
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注册 会 员 登 录 更 多 新 闻 


Axure RP 8.0 中 的 文本 有 标题 和 文本 两 种 。 标 题 又 分 为 一 级 标题 、 二 级 标题 和 三 级 标题 。 文 本 则 
分 为 文本 标签 和 文本 段落 。 
户 可 以 根据 需要 选择 不 同 大 小 的 标题 元 件 。 选 择 标题 元 件 ， 将 其 拖 入 页 面 中 ,如 图 4-28 所 示 。 


— 一 日 日 = 一 
级 标题 。 二 级 标题 三 级 标题 
图 4-28 
文本 标签 元 件 的 主要 功能 是 用 来 输入 较 短 的 普通 文本 ， 选 择 文本 标签 元 件 ， 将 其 拖 入 页 面 中 ， 
图 4-29 所 示 。 文 本 段落 元 件 用 来 输入 较 长 的 普通 文本 ， 选 择 文本 段落 元 件 ， 将 其 拖 入 页 面 中 ， 如 
4-30 所 示 。 
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‘gravida dolor sit amet lacus accumsan et viverra 
oto commodo. Proin sodales pulvinar tempor. 
Pum sociis natoque penatibus et magnis dis 


partunent montes, nascetur ndiculus mus. Nam : 
文本 标签 pew nn 和 。 
图 4-29 图 4-30 
拖 动 标题 或 文本 四 周 的 控制 点 ， 内 部 的 文本 会 自动 调整 位 置 。 当 文本 框 的 宽度 比 文本 内 容 宽 时 ， 


如 图 4-31 所 示 。 双 击 文本 框 的 控制 点 ， 即 可 快速 使 文本 框 大 小 与 文本 一 致 ， 如 图 4-32 所 示 。 
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图 4-31 图 4-32 


选择 文本 框 ， 用 户 可 以 在 选项 栏 上 为 其 指定 填充 颜色 和 线段 颜色 ， 如 图 4-33 所 示 。 双 击 选中 文 
本 内 容 ， 在 选项 栏 上 可 以 指定 文本 的 颜色 ， 如 图 4-34 所 示 。 
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图 4-33 
除了 为 文字 指定 颜色 外 ， 用 户 还 可 以 在 选项 栏 上 为 文字 指定 字体 、 字 型 和 字号 。 设 置 文字 加 粗 、 
和 斜体 和 下 画 线 ， 如 图 4-35 所 示 。 


字体 型 字号 斜体 体 颜色 
| | ! | 
Arial ~| Normal -47rIBIlv Ar- 
加 粗 下 画 线 
图 4-35 


7. 水 平 线 和 垂直 线 


Ws 水 平 线 和 垂直 线 元 件 可 以 创建 水 平 线条 和 垂直 线条 。 

是 用 来 分 割 功能 或 美化 页 面 的 。 选择 水 平 线 或 垂直 线 元 件 ， 
em 

选择 线条 , 用 户 可 以 在 选项 栏 中 设置 其 颜色 、 线 宽 和 类 型 ， 
如 图 4-37 所 示 。 也 可 以 在 选项 栏 中 的 “箭头 样式 ”下 拉 列 表 


中 选择 一 种 箭头 效果 ， 如 图 4-38 所 示 。 图 4.36 
| 国 一 导 二 到 于 旦 
加 
二 


热 区 元 件 就 是 一 个 隐形 的 ， 但 是 可 以 单 击 的 面板 。 在 “元 件 库 。 面 板 中 选择 热 区 元 件 ， 将 其 
入 页 面 中 ， 使 用 热 区 元 件 可 以 完成 为 一 张 图 片 同时 设置 多 个 超 链接 的 操作 ， 如 图 4-39 所 示 。 


图 4-39 


动态 面板 元 件 是 Axure RP 8.0 中 较为 常用 的 元 件 , 它 可 以 被 看 作 拥有 很 多 种 不 同 状态 ee 


当知 识 链接 : 
关于 动态 面板 元 件 的 使 用 ， 将 在 本 书 的 第 8 章 中 详细 介绍 。 
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10. 内 联 框架 


内 联 框架 元 件 是 网 页 制作 中 的 iFrame 框架 。 在 Axure RP 8.0 中 ， 用 户 使 用 内 联 框架 元 件 可 以 应 
用 任何 一 个 以 “HttpW” 开 头 的 URL 所 标示 的 内 容 ， 如 一 张 图 片 、 一 个 网 站 、 一 个 Flash 动画 ， 只 要 
能 用 URL 标示 就 可 以 了 。 选 择 内 联 框 架 元 件 ， 将 其 拖 入 页 面 中 ， 效 果 如 图 4-40 所 示 。 

双击 “内 联 框架 ”按钮 ， 弹 出 “链接 属性 ”对 话 框 ， 如 图 4-41 所 示 。 用 户 可 以 在 该 对 话 框 中 选 
择 链 接 项 目 中 的 内 部 页 面 和 绝对 地 址 的 外 部 页 面 。 


iFrame 是 HTML 的 一 个 控件 ， 用 于 在 一 个 页 面 中 显示 另外 一 个 页 面 。 


IT 


中 继 器 元 件 可 以 用 来 生成 由 重复 条 目 组 成 的 列表 页 ， 如 商品 列表 、 联 系 人 列表 等 。 并 且 可 以 非 
常 方便 地 通过 预先 设 定 的 事件 ， 对 列表 进行 新 增 条 目 、 删 除 条 目 、 编 辑 条 目 、 排 序 和 分 页 的 操作 。 


刍 知识 链接 : 


用 户 使 用 "切割 工具 ”可 | 回 癌 区 上 
以 将 选中 的 图 片 按照 自己 的 “而 咒 
意愿 进行 任意 分 割 ， 大 大 地 ”出 
方便 了 用 户 在 设计 过 程 中 的 ”图 吝 
诸多 不 便 。 
WD 使 用 图 片 元 件 导 入 如 图 4-42 所 示 的 
片 。 单 击 选项 栏 中 “钢笔 工具 ”后 的 更 多 按 
钮 ， 在 弹出 的 下 拉 列 表 中 选择 “切割 工具 ”， 
如 图 4-43 所 示 。 


> 源 文件 ， 素材 & 源 文件 \ 第 4 章 \ 分 离 网 页 中 的 图 片 .rp 
> 操作 视频 :视频 \ 第 4 章 \ 分 离 网 页 中 的 图 片 .mp4 


列 


第 4 章 AxureRP 元 件 的 使 用 ， 


边界 点 (Ctrs5) 
切割 (Ckrk6) 

好 才 (Cth7) 

) 司 连 吉 (Ctrk8) 


~ 格式 出 (Ctri+9) 


图 4-42 图 4-43 
三 此 时 页 面 中 出 现 一 个 十 字 的 虚线 ， 在 图 片上 单 击 ， 即 可 完成 切割 操作 ， 如 图 4-44 所 示 。 用 
户 可 以 在 右上 角 选 择 十 字 切 割 、 横 向 切割 和 纵向 切割 。 多 次 切割 ， 删 除 没 用 的 部 分 ， 得 到 如 图 4-45 
所 示 的 图 


图 4-45 
三 当 对 图 片 执行 了 切割 操作 后 ， 在 图 片上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “固定 边 
角 范 围 ” 命 令 ， 会 在 图 片 四 周 出 现 边 角 标 记 ， 用 来 显示 当前 图 片 的 边 角 范围 ， 如 图 4-46 所 示 。 
芭 选择 “优化 图 片 ”命令 ，Axure RP 8.0 将 会 自动 优化 当前 图 片 ， 降 低 图 片 的 质量 ， 提 高 下 载 
的 速度 ， 如 图 4-47 所 示 。 


导入 图 片 
”分 草图 片 Ctrl+6 
好 ”我 竟 目 片 Ctrl+7 
VY ”国定 边 角 范 转 
图 4-46 图 4-47 


2 表单 元 件 Dj 
Axure RP 8.0 为 用 户 提供 了 丰富 的 表单 元 件 ， 便 于 用 户 在 原型 中 制作 更 加 逼真 的 表单 效果 。 表 


元 件 主要 包括 文本 框 、 多 行文 本 框 、 下 拉 列 表 框 、 列 表 框 、 复 选 框 、 单 选 按钮 和 提交 按钮 ， 接 下 来 
逐一 进行 介绍 。 


ED 


文本 框 元 件 主要 用 来 接受 用 户 输入 ， 但 是 仅 能 接受 单行 的 文本 输入 。 选 择 文本 框 元 件 ， 将 其 拖 
入 页 面 中 ， 效 果 如 图 4-48 所 示 。 在 文本 框 中 输入 文本 的 样式 ， 可 以 在 “检视 ”面板 中 “样式 ”选项 
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卡 下 的 “字体 ”下 拉 列 表 中 设置 ， 如 图 4-49 所 示 。 

选择 文本 框 元 件 , 在“ 检视: 文本 框 " 面板 的 “属性 " 
选项 卡 下 可 以 详细 设置 其 属性 ， 如 图 4-50 所 示 。 在 “类 属 448 
型 ”下 拉 列 表 中 可 以 选择 文本 框 的 不 同类 型 ， 用 于 不 同 
的 功能 ， 如 图 4-51 所 示 。 


了 2. 多 行文 本 框 BT 去 呈 


多 行文 本 框 元 件 能 够 接受 用 户 多 行文 本 的 输入 。 选 图 4-49 
择 多 行文 本 框 元 件 ， 将 其 拖 入 页 面 中 ， 效 果 如 图 4-52 所 示 。 

(六 p 六 ” zr 

| = EE 一 = 


Ea 


a AE P9999 
风尘 寺 角 汪 羡 入 入 站 芭 名 入 
最 攻守 


[| 
DR 
[a 
提交 流星 


元 未 


图 4-50 图 4-51 图 4-52 


3. 下 拉 列 表 框 ”》 


下 拉 列 表 框 元 件 主要 用 来 显示 一 些 列 一 
表 选 项 , 以 便于 用 户 在 其 中 选择 。 只 能 选择 ， 
不 能 输入 。 选 择 下 拉 列 表 框 元 件 ， 将 其 拖 图 4-53 
入 页 面 中 ， 效 果 如 图 4-53 所 示 。 


双击 下 拉 列 表 框 元 件 ， 在 弹出 的 “编辑 列表 选项 ”对 话 框 中 单 击 “ 添 加 ”按钮 ， 逐 一 添加 列表 ， 
效果 如 图 4-54 所 示 。 单 击 “ 添 加 多 个 ”按钮 ， 在 “添加 多 个 ”对 话 框 中 依次 输入 文本 内 容 ， 也 可 以 
完成 列表 的 添加 ， 如 图 4-55 所 示 。 
图 乱 汪 列表 迁 项 国人 
未 义 选 则 默认 为 第 一 个 。 一 
+ 1 XiX| wins 人 桔子 
得 其 
轩 中 国 苇 萝 
下 和 | 本 
回 日 本 
加 加 拿 大 
| 
Cm |[ mw% | We |[ Mm 
图 4-54 图 4-55 


勾 选 某 个 列表 选项 前 面 的 复 选 框 ， 代 表 将 其 设置 为 默认 显示 的 选项 ,没有 勾 选 则 默认 为 第 一 个 。 


ZE 


单 击 “ 确 定 ”按钮 ， 下 拉 列 


表 中 即 可 显示 添加 的 选项 ， 如 图 4-56 所 示 。 


列表 框 元 件 一 般 在 页 面 中 显示 多 个 供用 户 选择 的 选项 ， 并 且 人 允许 用 户 多 选 。 选 择 列表 框 元 件 ， 
效果 如 图 4-57 所 示 。 


将 其 拖 入 页 面 中 ， 


7 


复 选 框 元 件 允 许 用 户 从 多 个 选项 中 选择 多 个 选项 ， 选 中 状态 以 一 个 对 号 显示 ， 再 次 


图 4-56 

双击 “列表 框 ”按钮 ， 用 户 可 以 在 弹出 的 “编辑 列表 选项 ”对 话 框 中 为 其 添加 列表 选项 。 添 加 
的 方法 和 下 拉 列 表 框 元 件 相 同 ， 如 图 4-58 所 示 。 勾 选 “ 人 允许 选中 多 个 选项 ” 复 选 框 ， 则 人 允许 用 户 同 
时 选择 多 个 选项 ， 如 图 4-59 所 示 。 


图 4-57 


图 帝 撤 列表 迁 项 [EE | 
未 色 迁 则 睹 认为 篇 一 个 。 my 
+ tS 个 运动 
闫 全 
5 
错 
= | 
后 t 许 先 中 多 个 选项 
Cm ]( ws | 
图 4-58 图 4-59 


择 。 选 择 复 选 框 元 件 ， 将 其 拖 入 页 面 中 ， 效 果 如 图 4-60 所 示 。 


请 选择 个 人 委 好 
口 美食 口 旅 游 口 电影 口气 影 


图 4-60 


f 击 取消 选 


用 户 可 以 在 “检视 ， 复 选 框 ” 面 板 中 的 “属性 ”选项 卡 下 勾 选 “选中 ” 复 选 框 ， 则 当前 复 选 杠 


就 会 显示 为 选中 状态 ， 如 图 


4-61 所 示 。 


Y 复 迁 框 
回 选中 


图 4-61 


用 户 可 以 在 “对 齐 按钮 ”选项 下 选择 复 选 框 文本 的 对 齐 方 式 , 分 别 有 “ 左 ”和 “ 右 ” 两 种 选择 ， 


如 图 4-62 所 示 。 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


口 复 选 杠 
对 有 f 按 钥 轿 左 O 右 复 选 框 口 
图 4-62 


sa 


单 选 按钮 元 件 允许 用 户 在 多 个 选项 中 选择 一 个 选项 。 选 择 单 选 按钮 元 件 ， 将 其 拖 入 页 面 中 ， 效 
果 如 图 4-63 所 示 。 


Axure RP 8.0 提供 的 复 选 框 和 单 选 按钮 的 大 小 无 法 调整 ， 只 能 保持 默认 的 大 小 。 用 户 可 以 使 用 “动态 面板 ”制作 
符合 个 人 需求 的 复 选 框 或 单 选 按钮 。 


为 了 实现 单 选 按钮 效果 ， 必 须 将 多 个 单 选 按钮 同时 选中 ， 在 “检视 : 单 选 按钮 2)” 面 板 中 的 “ 设 
置 单 选 按钮 组 名 称 ”文本 框 中 为 其 命名 ， 才 能 实现 单 选 效 果 ， 如 图 4-64 所 示 。 


IE 


Axure RP 8.0 中 的 提交 按钮 元 件 只 是 作为 一 个 普通 的 元 件 存在 。 选 择 提交 按钮 元 件 ， 将 其 拖 入 页 
面 中 ， 效 果 如 图 4-65 所 示 。 


检视 : 单 选 按钮 2) 口 
属性 说 明 样式 


v 回 RadioButtons 


设置 单 选 按钮 组 名 称 : 
图 4-64 图 4-65 


实例 08 一 设置 网 页 中 文本 框 的 提示 文字 狗 


每 个 网 页 中 都 有 ， 到 
上 口 际 > 源 文件 ， 素 材 & 源 文件 \ 第 4 章 \ 设 置 网 页 中 文本 框 的 提示 文字 .rp 

许多 的 文本 框 需要 用 ( * 操作 视频 ， 视 频 ' 第 4 章 \ 设 置 网 页 中 文本 框 的 提示 文字 .mp4 
户 选择 和 填写 ， 而 每 ; 
个 0 ry Ee 和 人 二 
a [De 人 beeen ssa) Ee 
就 需要 设计 师 在 设计 的 时 候 为 文本 框 一 和 一 
注释 和 说 明 。 

到 将 文本 框 元 件 拖 入 工作 区 ， Ee 
如 图 4-66 所 示 。 打开 “检视 : 文本 框 " 
面板 ， 单 击 “ 属 性 ”选项 卡 ， 将 显示 oe 
文本 框 的 初始 设置 状态 ， 如 图 4_67 es 
所 示 。 


和 o 8 


栓 栅 -文本 答 
(及 藉 在 帮 动 
Y 文 二 征 
要 
Text 


提示 文字 


和 所 二 栏 式 加 99999: 
了 过 提示 能 发 图 输入 〇 区 到 集 点 
最 大 长 度 


图 4-66 


了 WB 在 面板 中 为 文本 框 的 各 个 属性 设置 参数 ， 如 图 


框 的 显示 效果 如 图 4-69 所 示 。 


< 检 册 -文生 
(及 坟 在 右 天 
[EEC 
对 要 


并 型 
Texdt 


提示 文字 
用 户 名 不 能 为 空 ! 
各 提示 样式 #999999; 


D 


D 


图 4-67 


4-68 所 示 。 设 置 完成 后 ， 


到 工作 区 ， 文 本 


刍 知 识 点 讲解 : 设置 元 件 的 “属性 ” 
在 “提示 文字 ”文本 框 中 输入 文字 ， 将 显示 在 文本 框 的 初始 状态 。 
在 “最 大 长 度 ” 文 本 框 中 输入 数值 ， 可 以 用 来 限制 文本 框 输入 文字 的 数量 。 


勾 选 “隐藏 边框 ” 


| 只 读 和 禁用 文本 框 的 效果 。 


通过 在 “提交 按钮 ”文本 中 输入 元 件 ， 即 可 实现 文本 框 
指定 元 件 的 事件 。 单 击 右 侧 的 下 三 角 ， 可 以 在 现 有 元 件 中 选择 对 象 。 单 击 


“只 读 ” 和 “禁用 ” 复 选 框 ， 可 以 分 另 


实现 隐藏 文本 框 边框、 设置 文本 为 ， 


回 


车 触发 事件 。 按 下 


ee 
“清空 


提示 内 容 ， 用 来 实现 等 光标 移动 到 文 


前 文本 框 中 内 容 。 

用 户 可 以 在 “元 件 提示 ”文本 框 中 输入 
| 提示 内 容 的 效果 。 

本 继续 将 提交 按钮 元 件 拖 入 工作 区 ， 如 
图 4-71 所 示 。 


回 车 键 时 ， 触 发 ， 
"选项 则 清空 当 ， 


本 框 上 时 ， 显 示 ， 


图 4-70 所 示 。 继 续 为 提交 按钮 元 件 设置 各 项 参数 ， 如 


KE 
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Ce 栓 涡 -提交 皖 钵 D 
( 吾 冯 发 久生 天 


图 4-70 图 4-71 


芭 设置 完成 后 , 单 击 “预览 " 按钮 ,在 浏览 器 中 将 光标 移动 到 文本 框 上 ， 显示 提示 内 容 的 效果 ， 
如 图 4-72 所 示 。 


用 户 名 不 能 为 空 


N 


| [sss 
图 4-72 


“菜单 和 表格 元 件 


Axure RP 8.0 为 用 户 提供 了 实用 的 菜单 和 表格 元 件 。 用 户 可 以 使 用 该 元 件 非常 方便 地 制作 数据 表 
格 和 各 种 形式 的 菜单 。 菜 单 和 表格 元 件 主要 包括 树 状 菜单 、 表 格 、 水 平 菜单 和 垂直 菜单 ， 接 下 来 逐 
一 进行 介绍 。 


IT 


“ 树 ” 的 主要 功能 是 用 来 创建 一 个 属性 目录 。 将 树 元 件 选 中 , 拖 卸 到 页 面 中 , 效果 如 图 4-73 所 示 。 
单 击 元 件 前 面 的 三 角形 ， 可 将 该 树 状 菜单 收 起 ， 效 果 如 图 4-74 所 示 。 双 击 单个 菜单 可 以 修改 菜 
单 内 容 ， 效 果 如 图 4-75 所 示 。 


YI ;7 新 闻 
ltem 1.1 体育 新 闻 
2 pve 娱乐 新 闻 
' J» ;hltem1 财经 新 闻 
图 4-73 图 4-74 图 4-75 


在 元 件 选 项 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 ”下 的 子 命令 ， 可 以 进行 添加 菜 
单 的 操作 ， 如 图 4-76 所 示 。 
加 ”添加 子 节点 : 在 当前 选中 菜单 下 添加 一 个 菜单 。 


加 ”编辑 图 标 : 通过 导入 的 方式 为 菜单 指定 一 个 图 标 。 
用户 如 果 想 删除 某 一 个 菜单 命令 ， 可 以 在 菜单 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 删 
除 节点 ”命令 ， 即 可 将 当前 命令 删除 ， 如 图 4-77 所 示 。 


一 


选中 树 


弹出 “ 树 属性 ”对 话 框 ， 如 图 


在 该 对 话 框 中 ， 用 户 可 以 选择 将 显示 展开 / 折 又 的 图 标 设置 为 加 号 或 三 角形 ， 


图 4-76 


元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 树 属性 ”命令 ， 如 图 4-78 所 示 。 


4-79 所 示 。 


¥ wum 
多 ”复制 (O 
围 粘贴 P) 


转 措 为 母 版 (M) 
转换 为 动 坊 面板 (D) 


Cul+G 


移动 (M) 


删除 节点 (D) 


图 4-77 


图 4-78 


图 4-79 


也 可 以 通过 导入 


9x9 像素 图 片 的 方法 ， 设 置 个 性 的 展开 图 标 ， 如 图 4-80 所 示 。 用 户 也 可 以 在 “检视 : 树 节点 ” 面 
板 中 为 树 元 件 指定 树 图 标 和 树 节 点 图 标 ， 如 图 4-81 所 示 。 


[© 门户 网 站 | 
| 0O 有 RI | 
| 〇 聊天 视频 | 
| 0 新 可 | 
| @ 娱乐 /\ 填 | 
| OF 网 | 
| Om | 
图 4-80 


入 各 位 而 1+* 


图 4-81 


树 状 菜单 具有 一 定 的 局 限 性 ， 显 示 树 节点 上 添加 的 图 标 ， 所 有 选项 都 会 自动 添加 图 标的 位 置 ， 且 元 件 的 边框 也 
不 能 自 定义 格式 。 如 果 想 要 制作 更 多 效果 ， 可 以 考虑 使 用 动态 面板 。 
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使 用 表格 元 件 可 以 在 页 面 上 显示 表格 数据 。 选 择 表格 元 件 ， 将 其 拖 入 页 面 中 ， 如 图 4-82 所 示 。 


用 户 也 可 以 通过 拖 动 的 方式 选择 行 或 列 。 配 合 Shift 键 可 以 选择 不 连续 的 单元 格 。 


选择 行 或 列 后 ， 可 以 在 “检视 ”面板 中 为 其 指定 填充 色 和 边框 粗细 ， 在 选项 栏 中 也 可 为 其 指定 
填充 色 、 边 框 颜色 和 粗细 ， 效 果 如 图 4-83 所 示 。 


| Column 1 | Column 2 | Column 3 


图 4-82 图 4-83 
用 户 如 果 想 增加 列 或 行 ， 可 以 在 表格 元 件 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 对 应 的 命 
令 即 可 ， 如 图 4-84 所 示 。 
四 ”选择 行 / 选 择 列 : 选中 一 行 或 者 一 列 。 
加 ”上方 插入 行 /下 方 插入 行 : 在 当前 行 的 上 方 或 下 方 添加 一 行 。 
四” 左 侧 插入 列 / 右 侧 插入 列 : 在 当前 列 的 左 侧 或 右 侧 添加 一 列 。 
回 删除 行 /删除 列 : 删除 当前 所 选 行 或 列 。 


3 


使 用 水 平 菜单 元 件 可 以 在 页 面 上 轻松 制作 水 平 菜单 效果 。 


ZE 


使 用 垂直 菜单 元 件 可 以 在 页 面 上 轻松 制作 垂直 菜单 效果 。 选 择 垂直 菜单 元 件 ， 将 其 拖 入 页 面 中 ， 
效果 如 图 4-85 所 示 。 垂 直 菜单 元 件 与 水 平 菜单 元 件 的 使 用 方法 基本 相同 ， 此 处 就 不 再 详细 介绍 了 。 


选择 行 (R) 

上 方 揪 入 行 (A) 
下 方 播 入 行 (B) 
删除 行 


选择 列 ( 〇 
左 侧 插 入 列 (D) 
右 侧 播 入 列 (R) 
删除 列 


HT 
Hi 


交互 样式 … 
图 4-84 


实例 09 制作 委 直 菜单 © 


使 用 Axure RP 中 的 菜单 和 表格 元 件 ， 可 以 使 设计 师 非 常 方 便 地 在 产品 原型 设计 
中 绘制 多 种 多 样 的 表格 和 菜单 。 


色 


防 ”第 4 章 AxureRP 元 件 的 使 用 ， 


I 选择 垂直 菜单 元 件 ， 将 其 拖 | ， 源 文件 。 素 材 & 源 文件 第 4 章 \ 制 作 至 直 菜单 'p 
入 页 面 中 ， 效 果 如 图 4-86 所 示 。 双 | * 操 作 视频 : 视频 第 4 章 \ 制 作 委 直 菜单 mp4 


击 菜单 名 ， 即 可 修改 菜单 文字 ， 效 果 
如 图 4-87 所 示 。 


图 4-86 图 4-87 


三 在 元 件 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 菜单 填充 ”命令 ， 如 图 4-88 所 示 。 
在 弹出 的 “菜单 填充 ”对 话 框 中 设置 填充 的 大 小 ， 选 择 应 用 的 范围 ， 如 图 4-89 所 示 。 


图 4-88 图 4-89 
三 设置 “填充 "为 10px， 应 用 到 当前 菜单 ， 单 击 “ 确 定 ”按钮 ， 效 果 如 图 4-90 所 示 。 选 择 
垂直 菜单 ， 可 以 在 “检视 : 菜单 ”面板 中 为 其 指定 填充 颜色 ,选择 色 块 ， 为 其 指定 “填充 ”颜色 ， 
效果 如 图 4-91 所 示 。 
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芭 在 元 件 上 方 单 击 鼠标 右键 ， 弹 出 如 图 4-92 所 示 的 快捷 菜单 ， 在 该 快捷 菜单 中 选择 “后 方 添 
加 菜单 项 ”命令 ， 为 元 件 添加 3 个 子 菜单 ， 并 重新 输入 文字 ， 如 图 4-93 所 示 。 


图 4-92 图 4-93 


标记 元 件 (Oy 


Axure RP 8.0 添加 了 新 的 标记 元 件 ， 用 来 帮助 用 户 对 产品 原型 进行 说 明和 标注 。 标 记 元 件 主要 包 
括 页 面 快照 、 水 平 箭头 、 垂 直 箭头 、 便 签 、 圆 形 标记 和 水 滴 标 记 ， 接 下 来 逐一 进行 介绍 。 


IE 


页 面 快 照 可 让 用 户 捕捉 引用 页 面 或 主页 面 图 像 。 可 以 配置 快照 组 件 显示 整个 页 面 或 页 面 的 一 部 
分 ， 也 可 以 在 捕捉 图 像 之 前 对 需要 应 用 交互 的 页 面 建立 一 个 快照 。 选 择 页 面 快照 元 件 ， 将 其 拖 入 页 


面 中 ， 效 果 如 图 4-96 所 示 。 
双击 元 件 ， 即 可 弹出 “引用 页 面 ”对 话 框 ， 如 图 4-97 所 示 。 在 该 对 话 框 中 可 以 选择 引用 的 页 面 
或 母 版 ， 引 用 效果 如 图 4-98 所 示 。 


在 “检视 : 页 面 快照 ”面板 下 的 “属性 ”选项 卡 下 可 以 看 到 页 面 快照 的 各 项 参数 ， 如 图 
示 。 取 消 勾 选 “ 适 应 比例 ” 复 选 框 ， 引 用 页 面 将 以 实际 尺寸 显示 ， 贡 


双击 元 件 ， 光 标 变 成 小 手 标记 ， 可 以 拖 动 查看 引 


园 引 Rs 


当知 识 链接 : 


图 4-99 


， 如 


四 SEE 全 局 
na 二 


登录 


Ousaa OxHsaa 


【A 日 
号 


【= 


忘记 宫 码 ”忘记 会 员 名 免费 注 册 


4-100 所 示 。 


时 Rm 安 全 加 


图 4-100 


页 面 。 滚 动 鼠标 滚轮 ， 可 以 缩小 或 放大 引用 页 
4-101 所 示 。 用 户 也 可 以 拖 动 调整 快照 的 尺寸 ， 效 果 如 图 4-102 所 示 。 


【3 民品 
上 
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2. 水 平 箭头 和 垂直 箭头 


使 用 箭头 可 以 在 产品 原型 上 进行 标注 。Axure RP 8.0 提供 了 水 平 箭头 和 垂直 箭头 两 种 箭头 。 选 择 
箭头 元 件 ， 将 其 拖 入 页 面 中 ， 效 果 如 图 4-103 所 示 。 


图 4-103 
选中 箭头 元 件 ， 可 以 在 工具 栏 上 设置 箭头 的 箭 身 颜色 、 粗 细 和 样式 ， 如 图 4-104 所 示 ， 还 可 以 
对 箭头 的 头 部 样式 进行 修改 ， 如 图 4-105 所 示 。 


OO ， 


图 4-104 图 4-105 


Axure RP 8.0 为 用 户 提 供 了 4 种 不 同 颜色 的 便签 ， 以 便 用 户 在 原型 标注 中 使 用 。 选 择 便签 元 件 ， 
将 其 拖 入 页 面 中 ， 效 果 如 图 4-106 所 示 。 


便签 3 便签 4 


图 4-106 


Axure RP 8.0 为 用 户 提供 了 两 种 不 同形 式 的 标记 : 圆 形 标记 和 水 滴 标 记 。 选 择 标记 元 件 ， 将 其 拖 
入 页 面 中 ， 效 果 如 图 4-107 所 示 。 

标记 元 件 主要 是 在 完成 的 原型 上 标记 说 明 的 。 双 击 元 件 ， 可 以 为 其 添加 文字 ， 如 图 4-108 所 示 。 
选中 元 件 ， 可 以 在 工具 栏 上 修改 其 填充 颜色 、 线 框 颜色 、 线 框 粗细 、 线 框 样式 和 阴影 样式 ， 修 改 后 
的 效果 如 图 4-109 所 示 。 


4 章 Axure RP 元件 的 使 用 | 


实例 10 一 一 制作 标签 说 明 


元 件 库 中 的 标记 元 件 主要 用 来 》 源 文件 ， 素材 & 源 文件 第 4 章 \ 制 作 标签 说 明 .rp 
帮助 用 户 阐述 自己 对 产品 原型 设计 操作 视频 ;视频 \ 第 4 章 \ 制 作 标签 说 明 .mp4 


的 一 些 解释 和 说 明 , 方便 他 人 理解。 

玛 选择 “便签 1” 元件 ， 将 
其 拖 入 工作 区 ， 如 图 4-110 所 示 。 ed 
可 以 在 “样式 ”选项 卡 上 对 其 填充 和 描 边 样 式 进行 et 
修改 ， 如 图 4-111 所 示 。 


最 新 户型 


区 PEE 
Bily Ar a 


图 4-110 


玛 双击 元 件 ， 继 续 在 元 件 中 添加 文字 ， 如 图 4-112 所 示 。 在 “样式 ”选项 卡 中 可 以 修改 文字 


的 大 小 和 位 置 ， 如 图 4-113 所 示 。 


4 © 过 © 
最 新 户型 
三 室 两 厅 户 型 、 主 卧 独 立 
卫生 间 、 开 放 式 的 客厅 和 
局 房 


图 4-112 图 4-113 


Axure RP 8.0 中 提供 了 专用 的 流程 图 元 件 和 图 标 元 件 ， 以 便于 用 户 设计 和 制作 产品 原型 。 
默认 情况 下 ， 流 程 图 元 件 和 图 标 元 件 都 被 保存 在 “元 件 库 ” 的 下 拉 菜 单 中 ， 如 图 4-114 所 示 。 


Kz 
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用 户 可 以 通过 选择 不 同 的 选项 ， 来 显示 不 同 的 元 件 组 合 。 也 可 以 通过 选择 “选择 全 部 ”选项 ， 将 所 
有 元 件 显示 出 来 ， 如 图 4-115 所 示 。 


Wh 
4 了 


图 4-114 图 4-115 
使 用 流程 图 元 件 可 以 帮助 用 户 更 好 地 设计 和 制作 流程 图 页 面 ， 如 图 4-116 所 示 。 使 用 图 标 元 件 


可 以 为 用 户 提供 更 多 美观 实用 的 图 标 素材 ， 如 图 4-117 所 示 。 
wx 元 新 三 Q < 元 和 = Q 
pa oe 
口 口 口 ) ey 看 @ @ 三 三 三 三 8 4g 
区 [] 出 和 当 & > 从 4 < 
人 
从 日 图 加 © © © Ov € 人 个 中 
图 4-116 图 4-117 
实例 11 一 一 绘制 流程 图 
可 以 使 用 流程 图 元 
人 gi J ， 源 文件 ， 素材 & 源 文件 \ 第 4 章 \ 绘 制 流程 图 .rp 
关于 流程 图 元 件 的 具体 使 用 方 ;操作 视频 : 视频, 第 4 章 \ 绘 制 流程 图 mp4 
nder -EPE | 


法 ， 通 过 下 面 的 操作 实例 来 向 用 


户 展示 。 
到 在 “元 件 库 ” 面板 中 ， 选 中 Flow 元 件 库 ， | | ~ , 
将 矩形 元 件 拖 入 工作 区 添加 控件 ， 如 图 4-118 所  ，; 
示 。 继 续 使 用 萎 形 元 件 在 工作 区 内 添加 控件 ， 如 图 
4-119 所 示 。 
了 单 击 工具 栏 中 的 “连接 ”按钮 ， 将 光标 
移入 元 件 上 出 现 连接 状态 ， 向 下 拖 息 鼠标 ， 如 
图 4-120 所 示 。 松 开 鼠 标 后 ， 连 接线 完成 ， 如 图 
4-121 所 示 。 继 续 使 用 相同 的 方法 完成 鞭 形 元 件 条 
矩形 元 件 的 连接 ， 如 图 4-122 所 示 。 
到 继续 使 用 菱形 元 件 在 工作 区 内 添加 控件 ， 如 图 4-123 所 示 。 在 和 矩形 元 件 和 鞭 形 元 件 之 间 添 
加 连接 线 ， 连 接线 会 根据 元 件 之 间 的 位 置 和 距离 调整 自身 的 形状 ， 如 图 4-124 所 示 。 


图 4-118 


El 


图 4-119 


ea 


图 4-124 


芭 继续 在 鞭 形 元 件 和 和 矩形 元 件 之 间 添 加 连接 线 , 如 图 4-125 所 示 。 所 有 的 连接 线 添加 完成 后 ， 


we 
a 
< < a 
E BA > 
| li 
图 4-123 
流程 图 如 图 4-126 所 示 。 
| 
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图 4-126 
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三 在 “样式 "选项 卡 中 ， 单 


二“ 箭头 样式 ”下 拉 按 钮 ， 用 户 可 以 在 弹出 的 下 拉 列 表 中 选择 连 


接线 的 箭头 样式 ， 如 图 4-127 所 示 。 选 择 完成 后 ， 流 程 图 如 图 4-128 所 示 。 


( 带 计 直击 


io 


汉语 


图 4-127 图 4-128 


到 双击 连接 线 ， 用 户 可 以 在 连接 线 上 输入 文字 ， 如 图 4-129 所 示 。 使 用 相同 方法 完成 相似 内 
容 的 操作 ， 如 图 4-130 所 示 。 


ndex 
| [3 EE E3 这 


[Pe] | [| 
了 | | 这 了 


图 4-129 图 4-130 


到 在 “样式 ”选项 卡 中 ， 单 击 “ 线 段 类 型 ”下 拉 按 钮 ， 可 以 在 弹出 的 下 拉 列 表 中 选择 连接 线 
的 线段 类 型 ， 如 图 4-131 所 示 。 选 择 完成 后 ， 流 程 图 如 图 4-132 所 示 。 
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图 4-131 | - 图 4-132 
王选 中 一 个 元 件 或 是 几 个 元 件 ， 向 任何 方向 移动 元 件 ， 如 图 4-133 所 示 。 则 连接 线 会 随 着 元 
件 的 移动 而 改变 位 置 或 形状 ， 如 图 4-134 所 示 。 


图 4-133 图 4-134 


“概要 ”面板 的 作用 p 


一 个 原型 中 通常 会 包含 很 多 元 件 ， 元 件 之 间 会 出 现 亚 加 或 者 遮盖 ， 这 就 给 用 户 操作 带 来 麻烦 。 
遇 到 这 种 情况 ， 可 以 通过 “元 件 管理 器 ”实现 对 元 件 的 各 种 操作 。Axure RP 8.0 中 更 改 为 “概要 ” 面 
板 ， 如 图 4-135 所 示 。 

在 该 面板 中 将 显示 页 面 中 所 有 的 元 件 ， 单 击 面板 中 的 选项 ， 页 面 中 对 应 的 元 件 被 选中 ; 选中 页 
面 中 的 元 件 ， 面 板 中 对 应 的 选项 也 会 被 选中 ， 如 图 4-136 所 示 。 


口 mdex 4 
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图 4-135 图 4-136 
单 击 面板 右上 角 的 “排序 与 筛选 ”按钮 ， 弹 出 如 图 4-137 所 示 的 菜单 ， 用 户 可 以 根据 需要 选择 
需要 显示 的 内 容 。 单 击 “ 查 找 ” 按 钮 ， 面 板 项 部 出 现 查找 文本 框 ， 输 入 想 要 查找 的 元 件 名 ， 即 可 找 
到 想 找 的 对 象 ， 如 图 4-138 所 示 。 


元 件 的 属性 p 


选择 一 个 元 件 ， 在 “检视 ”面板 “属性 ”选项 卡 下 可 以 看 到 相关 的 参数 内 容 。 而 且 需 要 注意 ， 
并 不 是 每 一 个 元 件 的 属性 都 相同 ， 用 户 要 根据 所 选 元 件 的 不 同 来 设置 元 件 的 属性 。 


9 交互 事件 中 的 页 面 交互 @ 


Axure RP 8.0 的 交互 设置 是 在 “属性 ”选项 卡 下 完成 的 。 按 照应 用 对 象 的 不 同 ， 交 互 事件 可 以 分 
为 页 面 交 互 和 元 件 交 互 两 种 。 下 面 针 对 页 面 交 互 进行 讲解 。 
将 页 面 想象 成 舞台 ， 而 页 面 交 互 事件 就 是 在 大 幕 拉 开 的 时 刻 向 用 户 呈现 的 效果 。 同 时 需要 注意 
的 是 在 原型 中 创建 的 交互 命令 是 由 浏览 器 来 执行 的 ， 也 就 是 说 页 面 交互 效果 需要 “预览 ”才能 看 到 。 


在 页 面 中 空白 位 置 单 击 ， 可 以 看 [ER | 页 本 RE 二 对 
到 “检视 : 页面” 面板 ， 如 图 4-139 EN 一 me 页 面 记 标 双 主 时 
所 示 。 在 “交互 ”选项 下 可 以 看 到 默 ”| “ 二 页 面 入 标 右 二 对 
认 的 3 个 交互 事件 , 单 击 “更 多 事件 ” | “< 页 页 标 移动 时 
下 拉 菜 单 , 可 以 看 到 更 多 的 交互 事件 ， i 页 而 按键 接 下 时 
如 图 4-140 所 示 。 | 页 面 按 急 松 开导 

更 多 事件 >>> 窗口 向 上 滚动 时 
二 局 号 | | 窗口 向 下 滚动 时 
自 适 应 视图 改变 时 
图 4-139 图 4-140 

交互 事件 可 以 理解 为 产生 交互 。 [Ess | 
的 条 件 ， 例 如 ， 当 页 面 载 入 时 , 将 | a EE 
会 如 何 ， 当 窗口 滚动 时 ， 将 会 如 。 | 四 
何 。 而 将 会 发 生 的 事情 就 是 交互 事 | :| 
件 的 动作 。 | 

在 页 面 中 空白 的 位 置 单 击 ， 然 2 | 
后 双击 “属性 ”选项 卡 下 的 “页 区 | 
面 载 入 时 ”选项 ， 弹 出 “用 例 编 二 一 
辑 < 页 面 载 入 时 >” 对 话 框 ， 如 图 2 
4-141 所 示 。 Ee 

CE Ce wm 
图 4-141 


“用 例 编辑 ”对 话 框 的 项 部 显示 用 例 的 名 称 ， 下 面 为 “添加 动作 ”“ 组 织 动 作 ” 和 “配置 动作 ” 
三 部 分 。 "添加 动作 ”列表 下 包含 Axure RP 8.0 中 所 有 的 动作 ， “组 织 动作 ”列表 下 将 显示 添加 的 所 
有 动作 ， “配置 动作 ”列表 下 将 显示 动作 的 详细 参数 ， 供 用 户 配置 。 


1. 打开 链接 


用 户 可 在 动作 列表 中 选择 “打开 链接 ”动作 。 

加 ”当前 窗口 : 使 用 当前 窗口 显示 打开 的 链接 页 面 ， 用 户 可 以 选择 打开 当前 项 目的 页 面 ， 如 图 4-142 
所 示 。 

回 ”新 窗口 /新 标签 : 使 用 一 个 新 的 窗口 或 新 标签 显示 打开 的 链接 页 面 。 用 户 也 可 以 选择 打开 链接 一 
个 绝对 地 址 ， 如 图 4-143 所 示 。 

自 弹出 窗口 : 弹出 一 个 新 的 窗口 显示 打开 的 链接 页 面 。 用 户 可 以 选择 打开 当前 项 目的 页 面 ， 也 可 


以 选择 打开 链接 一 个 绝对 地 址 ， 并 且 可 以 设置 “弹出 属性 ”， 如 图 4-144 所 示 。 需 要 注意 的 是 ， 
窗口 的 尺寸 是 页 面 本 身 的 尺寸 加 上 浏览 器 尺寸 的 总 和 。 
回 ” 父 级 窗口 : 使 用 打开 当前 页 面 的 页 面 显示 打开 的 链接 页 面 。 用 户 可 以 选择 打开 当前 项 目的 页 面 ， 
可 以 选择 打开 链接 一 个 绝对 地 址 ， 如 图 4-145 所 示 。 


se 
| 
ls cs 
Es = 

有 二 

Eo 

汉 旺 


0 这 Si 区 村 -GOV ah- Em me 上 he Im 0 
志 因 上 一 页 < 莹 最 由 六 元 牧 > E23 sje je 后 
图 4-142 图 4-143 图 4-144 图 4-145 


2. 关闭 窗口 
选择 “关闭 窗口 ”事件 ， 将 实现 在 浏览 器 打开 时 自动 关闭 当前 窗口 ， 如 图 4-146 所 示 。 


用 例 名 称 Case 1 漂 加 条 件 


4 锋 二 “| 4 case1 关闭 当前 宣 口 


图 4-146 


3. 在 框架 中 打开 链接 》 


使 用 框架 可 以 实现 将 多 个 子 页 面 显 。 [Eee 
示 在 同一 个 页 面 的 效果 。 选 择 “ 在 框架 “| ~ 
中 打开 链接 ”事件 ， 可 实现 更 改 框架 链 “> 
接 页 面 的 操作 。 用户 可 以 在 “配置 动作 " Es 
下 选择 打开 位 置 为 “内 联 框架 ”和 “ 父 
级 框架 ”， 如 图 4_147 所 示 。 
加 “内 联 框架 ” 指 当前 页 面 中 使 有 的。 | Sa 
框架 。 
加 “ 父 级 框架 " 指 2 个 以 上 的 框架 嵌 套 ， 
也 就 是 一 个 打开 的 页 面 中 也 使 用 了 
框架 , 打开 的 页 面 称 为 “ 父 级 框架 " 。 


‘ig 


i Ri 
关于 “内 联 框架 ”的 使 用 ， 在 本 章 的 42.1 中 有 详细 介绍 。 
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4. 滚动 到 元 件 < 错 链接 > 


滚动 到 元 件 事件 指 的 是 页 面 打开 时 , 自动 滚动 到 指定 的 位 置 。 这 个 事件 可 以 用 来 制作 "返回 顶部” 


的 效果 。 


y 


户 可 以 设置 滚动 的 方向 为 “ 仅 垂直 滚动 ”“ 仅 水 平 滚动 和 “水 平和 垂直 滚动 ”， 如 图 4-148 所 


示 。 也 可 以 为 滚动 效果 设置 “动画 ”效果 。 单 击 “ 动 画 ” 后 面 的 下 拉 列 表 ， 选 择 一 种 动画 方式 ， 如 
图 4-149 所 示 。 
选择 一 种 动画 效果 ， 在 “时 间 ” 文 本 框 中 设置 动画 持续 的 长 度 ， 如 图 4-150 所 示 。 单 击 “ 确 定 ” 
按钮 ， 即 可 完成 滚动 到 元 件 的 交互 效果 。 


页 面 滚动 的 位 置 受 页 面 长 度 的 影响 ， 如 果 页 面 不 够 长 ， 则 底部 的 对 象 无 法 实现 滚动 效果 。 


5. 设置 自 适应 视图 


单 击 “ 自 适应 视图 ”事件 ， 用 户 可 以 选择 “自动 ”和 “基本 ”两 种 配置 。 选 择 “ 自 动 ”， 当 前 
页 面 自动 自 适应 视图 ; 选择 “基本 ”， 当 前 页 面 会 以 “ 自 适应 视图 ”对 话 框 设置 为 准 。 


当知 识 链 接 : 


实例 12 一 一 打开 页 面 链 接 


Axure RP 8.0 中 提 国 沿 
供 了 “打开 链接 ”的 页 “其 
面 动 作 ， 方 便 用 户 更 加 ”中 
快捷 地 设计 产品 原型 。 
到 找到 并 打开 素 
材 文件 夹 ， 单 击 “ 打 开 链 接 素材 .rp” 文 
件 将 其 选中 ， 继 续 双 击 文件 将 其 打开 ， 
如 图 4-151 所 示 。 


A 


* 源 文件 ， 素材 &% 源 文件 \ 第 4 章 \ 打 开 页 面 链接 .rp 
操作 视频 : 视频 \ 第 4 章 \ 打 开 页 面 链接 .mp4 
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加 | Introduction 


本 i Whatis I? 
- Plate Is a next-generation moblle Interaction design 
局 Ai 汉 sevice almed at helping designers creale complex 
rm animations and Interactions without writing code. The | 
platform generates 100% native moblle prototypes as | 
mH _H3 -| theyrebeing designed, enabling you lorefine unique 
= 


wm na 


图 4-151 


玛 打开 “用 例 编辑 < 载 入 时 >” 对 话 框 ， 如 图 4-152 所 示 。 实 现在 浏览 器 打开 时 打开 某 一 个 
链接 的 效果 ， 而 且 可 以 选择 打开 位 置 和 打开 的 属性 。 


= 一 
图 4-152 


三 单 击 “打开 链接 " 动作 前 的 三 角形 , 展开 扩展 动作 , 如 图 4-153 所 示 。 这 些 选项 与 “配置 动作 " 
下 的 “打开 位 置 ” 右 侧 的 下 拉 列 表 内 容 相同 ， 如 图 4-154 所 示 。 


x 烂 秽 ; 动态 面板 
1 1 
| 
AE Case1 a 
佬 区 域 于 neiron 未 潜能 区 域 于 


chufaqu) 
区 移动 neironto (0.379) 闫 性 
500ms 


多 RaRd 于 upanto768x464 


当选 中 页 面 中 的 元 件 后 ， 在 “检视 ”面板 “属性 ”选项 卡 下 将 显示 交互 事件 ， 默 认 情 况 下 显示 3 
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个 交互 事件 , 如 图 4-155 所 示 。 单 击 "更 多 事件 ”下 拉 菜单 , 将 显示 更 多 交互 事件 , 如 图 4-156 所 示 。 
请 三 双 去 对 
se 
庆生 让 对 
尺 了 J 让 要 时 
十 还 加 用 例 。。 ~ 创 坟 拉 ne 
办 龟 标 年 二 对 Say 
祖 扁 标 移入 时 


和 时 


喇 筷 标 移出 时 过 中 改天 时 


ia 本 
更 多 事件 >>> - 时 


图 4-155 图 4-156 
单 击 "添加 用 例 "选项 , 即 可 弹出 “用 例 编辑 "对 话 框 ,用 户 可 以 在 当前 对 话 框 中 添加 元 件 交互 事件 ， 
如 图 4-157 所 示 。 
单 击 "创建 连接 "选项 , 用 户 可 以 在 弹出 的 对 话 框 中 输入 或 选择 元 件 链接 的 页 面 ,如 图 4-158 所 示 。 


omer 重 ms F 
ep cer 3 
rw En 4 D ndex 
Pe D pege! 
D page2 
D page3 


图 4-157 图 4-158 


当知 识 链接 : 
用 户 可 以 在 “用 例 编辑 ” 对 话 框 中 设置 超 链接 打开 的 位 置 ， 也 可 以 设置 超 链 接 打 开 的 对 象 。 


HEED 


在 Axure RP 8.0 中 使 用 元 件 时 ， 要 为 元 件 都 指定 名 称 ， 这 就 为 显示 / 隐藏 元 件 打 下 良好 的 基础 。 
在 “用 例 编辑 ”对 话 框 中 为 元 件 添加 “显示 隐藏 ”动作 ， 对 话 框 显示 如 图 4-159 所 示 。 
用 户 在 “配置 动作 ”选项 下 选择 要 显示 或 隐藏 的 元 件 后 ， 可 以 在 下 面 设 计 “ 可 见 性 ”“ 动 画 ” 
和 动画 持续 “时 间 ”。 勾 选 “ 置 于 项 层 ” 复 选 框 可 将 元 件 位 置 移动 到 所 有 对 象 之 上 。 

勾 选 “显示 /隐藏 ”事件 “配置 动作 ”下 的 “隐藏 未 命名 的 元 件 ” 复 选 框 , 将 隐藏 没有 名 字 的 元 件 。 
用 户 可 以 选择 “显示 ”“ 隐 藏 ”和 “切换 ”3 种 可 见 性 。 选 择 不 同 的 可 见 性 ， 对 应 的 参数 也 不 相同 。 
@ ”显示 : 选择 “显示 ”可 见 性 ， 则 当前 元 件 为 显示 状态 。 用 户 可 以 在 “动画 ”下 拉 列 表 中 选择 一 

种 动画 形式 ， 并 在 “时 间 ” 文 本 框 中 输入 动画 持续 的 时 间 ， 如 图 4-160 所 示 。 在 “更 多 选项 ” 

下 拉 列 表 中 可 以 选择 更 多 的 显示 方式 ， 如 图 4-161 所 示 。 

灯箱 效果 : 人 允许 用 户 设 置 一 个 背景 颜色 ， 实 现 类 似 灯箱 的 效果 。 

弹出 效果 : 选中 此 选项 ， 将 自动 结束 触发 时 间 。 

推动 元 件 : 将 触发 事件 的 元 件 向 一 个 方向 推动 。 


图 4-159 


加 隐藏: 选择 “隐藏 ”可 见 性 ， 当 前 元 件 为 隐藏 状态 。 
也 可 以 通过 选择 “动画 ”方式 实现 隐藏 动画 效果 ， 在 
“时 间 ” 文 本 框 中 设置 隐藏 动画 的 时 间 。 勾 选 “ 拉 动 
元 件 ” 复 选 框 ， 可 以 实现 元 件 向 一 个 方向 隐藏 的 动画 
效果 ， 如 图 4-162 所 示 。 

加 ”切换 可 见 性 : 要 实现 “切换 可 见 性 ”动作 ， 需 要 同时 


> er 


图 4-162 


选择 两 个 以 上 的 元 件 。 可 以 在 “动画 ”下 拉 列 表 中 选择 动画 效果 ， 在 “时 间 ” 文 本 框 中 输入 动 
画 持续 时 间 。 勾 选 “推动 /拉动 元 件 ” 复 选 框 ， 可 以 实现 更 多 的 切换 动画 ， 此 处 的 设置 与 “隐藏 


相同 ， 就 不 再 一 一 介绍 了 。 


2. 设置 面板 状态 


该 动作 主要 针对 的 是 “动态 面板 ”元 件 ， 将 “元 件 库 ” 面 板 中 的 “动态 面板 ”元 件 拖 入 页 面 中 ， 
双击 “属性 ”面板 上 的 “鼠标 单 击 时 ”选项 ， 打 开 “ 用 例 编辑 ”对 话 框 。 
在 “添加 动作 ”选项 栏 中 单 击 “设置 面板 状态 ”动作 。 继 续 在 “配置 动作 ”中 勾 选 “动态 面板 ” 


复 选 框 ， 效 果 如 图 4-163 所 示 。 


UH UE 


过 要 设 置 类 志 的 荔 志 而 上 


E33 


回 Nt 林 
后 set (mbitR) tote to Statel 


寺 择 居 态 | State1 
进入 动画 无 时 间 
退出 动画 无 时 间 


“设置 文本 ”动作 可 以 实现 为 元 件 添加 文本 或 修改 元 件 文本 内 容 。 
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4. 设置 图 片  》 
“设置 图 片 ”动作 可 以 为 图 片 指定 不 同 状态 的 显示 效果 。 


】 5. 设置 选中 
使 用 该 事件 可 以 设置 元 件 是 否 选中 ， 通 常 是 为 了 配合 其 他 事件 而 设置 的 一 种 状态 。 设 置 选中 有 3 
种 状态 ， 分 别 是 选中 、 取 消 选 中 和 切换 选中 状态 。 
要 使 这 3 种 状态 生效 ， 元 件 必须 本 身 具 有 选中 选项 或 使 用 了 例如 “设置 图 片 ”等 动作 。 例 如 为 
一 个 按钮 元 件 设置 选中 ， 则 预览 时 该 按钮 元 件 将 显示 选中 状态 效果 。 


了 6. 设置 列表 选中 项 
用 户 可 以 通过 “设置 列表 选中 项 ”动作 ， 设 置 当 单 击 列表 元 件 时， 列表 中 的 哪个 选项 被 选中 。 
7. 启 用 /禁用 》 


户 可 以 设置 元 件 的 使 用 状态 ， 分 别 是 启用 和 禁用 。 也 可 以 设置 当 满 足 某 种 条 件 时 ， 元 件 启用 
或 被 禁用 ， 通 常 是 为 了 配合 其 他 动作 使 用 的 。 


使 用 “移动 ”动作 可 以 实现 元 件 移动 的 效果 ， 分 别 使 用 “矩形 2” 元 件 和 主要 按钮 元 件 ， 创 建 页 
图 4-164 所 示 的 页 面 效 果 。 选 择 “ 主 要 按钮 ”元 件 ， 双 击 “ 属 性 ”选项 卡 下 的 “鼠标 单 击 时 ”选项 ， 
如 图 4-165 所 示 。 


顺和 村 二 时 
加 电 标 浆 入 时 
加 民生 移出 时 

更 多 事 伯 >> 


图 4-164 图 4-165 
单 击 “移动 " 动作 ， 勾 选 “矩形 " 复 选 框 ， 设 置 移动 参数 ， 如 图 4-166 所 示 。 单 击 “确定 " 按钮 ， 
预览 效果 如 图 4-167 所 示 。 


a | rm fx rx 
a 王 3 ma ee 业 
Ma El 


图 4-166 图 4-167 
用 户 可 以 选择 设置 移动 方式 为 “经 过 ”或 “到 达 ”， 在 文本 框 中 输入 移动 的 坐标 位 置 。 选 择 如 
图 4-168 所 示 的 “动画 ”效果 ， 在 “时 间 ” 文 本 框 中 输入 持续 时 间 。 可 以 通过 为 移动 设置 边界 ， 控 
制 元 件 移动 的 界限 ， 如 图 4-169 所 示 。 


188) 
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TTD 


选择 该 事件 ， 可 以 实现 元 件 旋转 的 效果 。 在 “配置 动作 ”中 可 以 设置 旋转 的 角度 、 方 向 、 锚 点 、 
锚 点 偏 移 、 动 画 及 事件 ， 如 图 4-170 所 示 。 


了 fxx 方向 图 顺 时 针 〇 逆 时 针 
sw [FE 3 
锚 点 偏 移 x 0 fxr0 fx 
动画 | 无 | 时 间 500 误 秒 
图 4-169 图 4-170 


10. 设置 尺寸 

“设置 尺寸 ”动作 ， 可 以 为 元 件 指定 一 个 新 的 尺寸 。 

用 户 可 以 在 “ 宽 ”/“ 高 ”文本 框 中 输入 当前 元 件 的 尺寸 ， 如 图 4-171 所 示 。 在 “ 锚 点 ”下 拉 列 
表 中 选择 不 同 的 中 心 点 ， 锚 点 不 同 ， 动 画 的 效果 也 会 不 同 。 可 以 在 “动画 ”下 拉 列 表 中 选择 不 同 的 
动画 形式 ， 如 图 4-172 所 示 。 在 “时 间 ” 文 本 框 中 输入 动画 持续 的 时 间 。 


宽 80 fx 
高 60 fx 
铠 点 | 左上 角 
动画 无 ~ 时 间 500 法 稍 

图 4-171 


和 11. 置 于 顶层 /底层 》 

使 用 “ 置 于 项 层 /底层 ”动作 ， 可 以 实现 当 满足 条 件 时 ， 将 元 件 置 于 所 有 对 象 的 项 层 或 底层 。 双 
击 事件 选项 ， 在 “用 例 编辑 ”对 话 框 中 单 击 “ 置 于 项 层 / 底层” 选项， 勾 选 对 象 后 ， 可 以 设置 顺序 。 
12. 设置 不 透明 度 》 


使 用 “设置 不 透明 度 "动作 ， 可 以 实现 当 满足 条 件 时 ， 为 元 件 指定 不 同 的 不 透明 度 效果 。 双 击 
事件 选项 , 在 “用 例 编辑 " 对 话 框 中 单 击 “设置 不 透明 度 " 选项 , 勾 选 对 象 后 , 可 以 设置 "不 透明 度 ”' 动 
画 ” 和 “时 间 ”， 如 图 4-173 所 示 。 


不 适 明 : 100 % fx 
动画 | 无 ~| 时 间 500 冠 秒 
图 4-173 


ZE 


“获取 焦点 ”是 指 当 一 个 元 件 通过 点 击 时 的 瞬间 。 例 如 用 户 在 “文本 框 ”元 件 上 单 击 ， 然 后 输 
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入 文字 。 这 个 单 击 的 动作 ， 就 是 获取 了 该 文本 框 的 焦点 。 该 动作 只 针对 “表单 元 件 ”起 作用 。 

将 "文本 框 " 元 件 拖 入 页 面 中 , 在 “属性 " 选项 卡 下 添加 "提示 文字 ”, 如 图 4-174 所 示 。 选择 元 件 ， 
双击 “获取 焦点 时 ”选项 , 在 “用 例 编辑 ”对 话 框 中 单 击 “获取 焦点 ”动作 选项 , 勾 选 "文本 框 ” 和 “ 获 
取 焦 点 时 选中 元 件 上 的 文本 ” 复 选 框 ， 如 图 4-175 所 示 。 


图 4-174 图 4-175 
单 击 “确定 ”按钮 ， 预 览 效 果 如 图 4-176 所 示 。 


| 清 输 入 用 户 和 卫生 


14. 展开 / 折 到 树 节点 


该 动作 只 针对 树 状 菜单 元 件 。 通 过 为 元 件 添加 动作 ， 实 现 展开 或 折 又 树 节点 的 操作 。 


实例 13 一 一 设置 网 页 中 的 文本 


使 用 设置 文本 动作 ， 可 以 
为 图 片 、 文 本 段落 和 矩形 等 元 
件 添加 状态 ， 添 加 用 户 当 前 的 
想 要 解释 的 说 明文 字 。 

3 将 “图片” 元 件 拖 入 
页 面 中 ， 如 图 4-177 所 示 。 双 击 “ 属 性 ”选项 
卡 下 的 “鼠标 移入 时 ”选项 ， 在 “用 例 编辑 " 
对 话 框 中 单 击 “ 设 置 文本 ”动作 ， 如 图 4-178 
所 示 。 


* 源 文件 ， 素 材 &% 源 文件 \ 第 4 章 \ 设 置 网 页 中 的 文本 .rp 
操作 视频 : 视频 \ 第 4 章 \ 设 置 网 页 中 的 文本 .mp4 


图 4-178 


EBD $s uerr foen 
吏 勾 选 “图 片 ” 复 选 框 ,设置 文 本 为 “自然 美景 得 天 独 厚 ”， 如 图 4-179 所 示 。 单 击 “ 确 定 ” 
按钮 ，“ 检 视 : 图片 ”面板 如 图 4-180 所 示 。 


FE ee v 交互 
[2 


日 导 + 渗 加 用 例 
寅 亡 标 单 击 时 
4 寡 筷 标 移入 时 
4 号 Case1 
多 设置 文字 于 (图 片 ) = "自然 美景 
得 天 独 厚 " 
祖 扇 标 移出 时 
xe 
所 SE 
Ce jm 
图 4-179 


三 在 工具 栏 中 设置 文字 的 各 个 属性 ， 单 
击 “ 预 览 ”工具 ， 在 浏览 器 中 将 鼠标 指针 移 
入 图 片 中 ， 效 果 如 图 4-181 所 示 。 


图 4-181 


实例 14 一 设置 按钮 状态 © 
网 页 中 也 存在 大 量 按钮 ， 以 供用 户 做 出 各 种 选择 。 使 用 按钮 状态 可 以 在 浏览 器 
中 模 扫 真实 网 页 下 的 各 种 按钮 状态 ， 方 便 用 户 绘制 原型 设计 。 


* 源 文件 ， 素 材 & 源 文件 \ 第 4 章 \ 设 置 按钮 状态 .rp 
操作 视频 :视频 \ 第 4 章 \ 设 置 按 钮 状态 .mp4 


芭 将 图 片 元 件 拖 入 页 面 中 ， 调 整 大 小 和 位 置 ， 如 图 4-182 所 示 。 双 击 “ 属 性 ”选项 卡 下 的 “ 鼠 
标 移入 时 ”选项 ， 在 弹出 的 “用 例 编辑 ”对 话 框 中 单 击 “ 设 置 图 片 ”事件 ， 如 图 4-183 所 示 。 


车 Deen 


图 4-182 图 4-183 
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到 义 选 "图片 " 复 选 框 , 单 击 “默认 ”状态 后 的 “导入 "按钮 , 选择 一 张 图 片 , 如 图 4-184 所 示 。 
使 用 相同 的 方法 为 其 他 几 个 状态 分 别 指定 图 片 ， 如 图 4-185 所 示 。 
远 择 要 设置 图 片 的 图 片 元 件 
Ea 全 千 总 未 命名 的 元 件 
加 当前 元 件 
所 Set 便 片 ) Defaut 为 mage; 鼠标 号 停 to image; 饼 标 控 下 to 


配置 动作 
远 择 要 设置 图 片 的 图 片 元 件 4[ 上 
E33 全 让 的 元 件 Default 
加 当前 元 件 图 片 ”ee 号 入 清 储 
后 Set ( 八 片 ) Defaut 为 mage; 和 标号 停 to image; 户 标 把 下 各 入 村 
图 片 7” -SN 和 清 全 
饼 标 按 下 
加 ] » 图 片 ~ 四 导入 清 宝 
图 4-184 图 4-185 


了 单 击 “ 确 定 ” 按 钮 预览 效果 如 图 4-186 所 示 。 


图 4-186 


2 设置 交互 样式 9 

用 户 可 以 通过 设置 交互 样式 ， 快 速 得 到 精美 的 交互 效果 。 但 交互 样式 设置 的 事件 只 有 4 种， 分 
别 是 鼠标 悬 停 、 鼠 标 按 下 、 选 中 和 禁用 。 

用 户 可 以 在 “属性 ”选项 卡 下 找到 “交互 样式 设置 ”选项 ， 如 图 4-187 所 示 。 将 一 个 元 件 拖 入 
页 面 中 ， 选 中 元 件 ， 单 击 “ 鼠 标 悬 停 ” 选 项 ， 弹 出 “交互 样式 设置 ”对 话 框 ， 如 图 4-188 所 示 。 


国 =5mxs 本 | 
NET ver sw。 0 


检视 和 形 D 


(起 形 宫 琴 


EE 


CD wm | 
图 4-187 图 4-188 

用 户 可 以 选择 在 不 同 的 状态 下 为 元 件 设置 样式 ， 以 实现 当 鼠 标 悬 停 、 鼠 标 按 下 、 选 中 和 禁用 时 

元 件 不 同 的 样式 。 


设置 元 件 的 样式 只 


为 元 件 添加 样式 ， 除 了 可 以 起 到 美化 元 件 的 作用 外 ， 还 可 以 大 大 提高 工作 效率 。 对 于 页 面 中 大 
量 相似 元 素 的 制作 与 修改 ， 起 到 了 很 好 的 作 

用 户 可 以 通过 "检视" 面板 为 元 件 添加 各 种 样式 , 包括 设置 元 件 的 位 置 和 尺寸 填充、 阴影、 边框 、 
圆 角 半 径 、 不 透明 、 字 体 、 行 间距 、 项 目 符 号 、 对 齐 和 填充 等 。 

例如 ， 通 过 设置 元 件 的 位 置 和 尺寸 ， 可 以 准确 地 控制 元 件 在 页 面 中 的 位 置 以 及 元 件 本 身 的 大 小 ， 
如 图 4-189 所 示 。 


o 


用 户 可 以 在 X 轴 坐标 ” 和 “Y 轴 坐 标 ” 文本 NE | 
框 中 输入 数值 ， 更 改元 件 的 坐标 位 置 。 在 “宽度 ” 鲁 ' 后 Re 日 
和 "高度 " 文本 框 中 输入 数值 , 可 以 控制 元 件 的 尺寸 。 mr | 可] 
勾 选 “保持 宽 高 比例 ” 复 选 框 ， 修 改 宽度 或 高 度 时 ， ee 
对 应 的 高 度 和 宽度 将 随 之 等 比例 改变 。 Te 


, 图 4-189 
和 元 件 外 形 样式 Cb 


元 件 的 外 形 样式 , 指 的 是 元 件 的 填充 、 阴影、 边框 、 圆 角 半 径 和 不 透明 。 选中 元 件 , 用 户 可 以 在 " 检 
视 ” 面 板 中 的 “样式 ”选项 卡 下 逐一 设置 ， 如 图 4-190 所 示 。 


用 户 可 以 在 “填充 ”选项 后 面 的 “填充 颜色 ”下 拉 列 表 中 选择 颜色 ， 修 改元 件 的 填充 颜色 ， 如 
图 4-191 所 示 。 


填充 国 ~ 
阴影 EE 
边 生 三 -| [和 -| [E- 
本 角 半径 0 [a 
不 适 明 : 100 % 
图 4-190 图 4-191 


Axure RP 8.0 提供 了 单 色 和 渐变 两 种 填充 类 型 。 用 户 可 以 在 填充 色 板 项 部 的 “填充 类 型 ”中 选择 
“渐变 ”， 如 图 4-192 所 示 。 单 击 色 条 上 的 滑 块 ， 可 以 修改 渐变 的 颜色 ， 如 图 4-193 所 示 。 


填充 类 型 :| 渐变 Md 

ES 国 

国  # 009999 办 | 更 多 
图 4-193 
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拖 动 滑 块 ， 可 以 调整 渐变 颜色 的 范围 , 如 图 4-194 所 示 。 在 色 条 上 单 击 即 可 添加 一 个 新 的 滑 块 ， 
增加 一 个 新 的 颜色 ， 如 图 4-195 所 示 。 


沉 充 类 型 :| 靳 变 - 了 证 充 类 型 : | 渐变 吕 

me ml eg A wm 

图 / #l009 | 办 | 更 多 画 A#loog | 加 | 有 | 
图 4-194 图 4-195 


修改 渐变 的 角度 ， 可 以 实现 不 同 角度 的 填充 效果 ， 如 图 4-196 所 示 。 


使 用 填充 颜色 面板 上 的 “吸管 工具 ”， 可 以 在 页 面 中 任意 位 置 单 击 ， 吸 取 该 位 置 的 颜色 作为 填充 颜色 。 


用 户 可 以 通过 拖 动 “ 不 透明 度 ” 的 滑 块 ， 
实现 不 同 透明 度 的 颜色 填充 。 单 击 “ 更 多 ” 
按钮 ， 可 以 使 用 弹出 的 “颜色 ”对 话 框 中 的 
颜色 ， 如 图 4-197 所 示 。 


2 ms 


Axure RP 8.0 为 用 户 提供 了 外 部 阴影 和 aa 
内 部 阴影 两 种 阴影 样式 。 单 击 “ 阴 影 ”选项 RE mg on 可 
后 面 的 “内 部 阴影 ”按钮 ， 弹 出 如 图 4-198 [一 
所 示 的 对 话 框 。 勾 选 “ 阴 影 ” 复 选 框 ， 元件 图 4197 


增加 投影 效果 ， 如 图 4-199 所 示 。 


图 4-198 图 4-199 


用 户 可 以 设置 阴影 的 偏 移 位 置 、 模 糊 层级 和 阴影 颜色 。 偏 移 值 为 正 ， 则 阴影 在 元 件 的 右 侧 ， 偏 


移 值 为 负 ， 则 阴影 在 元 件 的 左 侧 。 模 糊 值 越 高 ， 则 阴影 羽化 效果 越 明 显 。 
单 击 “内 部 阴影 ”按钮 ， 在 弹出 的 对 话 框 中 勾 选 “阴影 ” 复 选 枉 ， 如 图 4-200 所 示 。 元 件 内 部 
阴影 效果 如 图 4-201 所 示 。 


TO rs 


图 4-200 图 4-201 


用 户 可 以 通过 设置 偏 移 、 模 糊 和 颜色 ， 实 现 更 多 丰富 的 内 部 阴影 效果 。 通 过 设置 “范围 ”的 值 ， 


可 以 获得 不 同 范围 的 内 阴影 效果 。 


3. 边框 
单 击 “" 边 框 ”选项 前 面 的 三 角形 ,将 其 选 ”半生 E+ [z+ EE- 
项 展开 ， 如 图 4-202 所 示 。 用 户 可 以 对 元 件 的 区 要 医 国 
线 宽 、 线 段 颜色 、 线 段 类 型 、 线 段位 置 和 箭头 ep 
样式 进行 设置 。 


Axure RP 8.0 一 共 提供 了 包括 None 在 内 的 6 种 线 宽 供用 户 选 择 ， 如 图 4-203 所 示 。 选 择 元 件 ， 
选择 一 种 线 宽 ， 效 果 如 图 4-204 所 示 。 


BUTTON 


图 4-203 图 4-204 
选择 元 件 ， 在 “线段 颜色 ”下 拉 列 表 中 选择 一 种 颜色 ， 即 为 圆 角 的 线 框 指定 颜色 。 通 过 设置 “不 
透明 度 ” 的 数值 ， 获 得 更 丰富 的 边框 效果 。 
Axure RP 8.0 为 用 户 提供 了 9 种 线段 类 型 ， 选 择 元 件 ， 在 “线段 类 型 ”下 拉 列 表 中 选择 一 种 类 型 ， 
效果 如 图 4-205 所 示 。 


元 件 通 常 都 有 四 边 边框 , 通过 设置 “线段 位 置 ”, 可 以 有 选择 地 显示 元 件 的 线 框 , 元 件 效果 和 “ 线 
段位 置 ”效果 如 图 4-206 所 示 。 设 置 “ 线 段位 置 ”， 观 察 元 件 效果 的 变化 ， 如 图 4-207 所 示 。 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


图 4-206 图 4-207 

当 用 户 在 页 面 中 创建 水 平 线 元 件 、 垂 直线 元 件 、 水 平 箭头 元 件 、 垂 直 箭头 元 件 或 使 用 钢笔 工具 
和 链接 工具 创建 线条 时 ， 可 以 为 其 添加 箭头 样式 。 选 择 一 个 水 平 线 元 件 ， 单 击 “ 箭 头 样 式 ”下 拉 列 表 ， 
如 图 4-208 所 示 。 分 别 为 线条 的 两 端 添加 箭头 ， 效 果 如 图 4-209 所 示 。 


图 4-209 


ZTE 


当选 择 矩 形 元 件 、 图 片 元 件 和 按钮 元 件 等 元 件 时 ， 可 以 在 “ 圆 角 半径 ”文本 框 中 输入 圆 角 半径 值 ， 
实现 圆 角 和 矩形 的 创建 ， 效 果 如 图 4-210 所 示 。 


ca 本 


图 4-210 
单 击 “ 圆 角 半径 ”最 右 侧 的 按钮 ， 用 户 可 以 自 定义 元 件 的 边 角 类 型 。 选 择 元 件 ， 元 件 效果 和 边 
角 位 置 效果 如 图 4-211 所 示 。 设 置 “ 边 角 位 置 ”， 设 置 “ 圆 角 半 径 ”为 25， 观 察 元 件 效果 的 变化 ， 


如 图 4-212 所 示 。 


5. 不 透明 度 


户 可 以 通过 修改 “不 透明 ”的 数值 ， 获 得 不 同 透明 度 的 元 件 效果 ， 如 图 4-213 所 示 为 设置 了 
不 同 不 透明 数值 的 元 件 效果 。 


图 4-211 


人 的 起 品 ，) 


50% 30% 
图 4-213 


在 此 处 设置 不 透明 度 ， 将 会 同时 影响 圆 角 的 填充 和 边框 。 如 果 元 件 内 有 文字 ， 也 将 会 受到 影响 。 如 果 需 要 分 开 
设置 ， 用 户 可 以 在 颜色 拾取 器 面板 中 设置 不 透明 度 。 


上 于 字体 样式 © 
Axure RP 8.0 提供 了 丰富 的 字体 样式 。 在 “样式 ”选项 卡 的 “字体 ”选项 下 ， 用 户 可 以 完成 对 文 
字 的 字体 、 字 号 、 字 型 等 参数 的 设置 ， 如 图 4-214 所 示 。 


字体 Arial 四 
Negreta = [24 ~ 
国 7 ya- [BR- 

图 4-214 


单 击 “字体” 下 拉 列 表 , 可 以 选择 需要 的 字体 。 单 击 “字体 类 型 " 下 拉 列 表 , 可 以 选择 字体 的 类 型 。 
单 击 “ 字 体 尺寸 ”下 拉 列 表 ， 可 以 设置 文字 的 大 小 尺寸 。 

通过 单 击 相应 的 按钮 ， 可 以 实现 字体 的 加 粗 、 和 斜体 和 下 画 线 效果 ， 单 击 “ 文 本 颜色 ”按钮 ， 可 
以 设置 文本 的 颜色 ， 如 图 4-215 所 示 。 单 击 “ 文 字 阴 影 ”下 拉 列 表 ， 弹 出 如 图 4-216 所 示 的 选项 。 
可 以 在 其 中 设置 阴影 的 角度 、 模 糊 和 颜色 。 


呵 "[uj[aA-> 
图 4-215 图 4-216 
加 行 间距 : 当 使 用 文本 段落 时 ， 可 以 通过 设置 行 间距 控制 字体 显示 的 效果 ， 行 间距 分 别 为 10 和 
20 的 效果 如 图 4-217 所 示 。 
Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Aenean euismod bibendum laoreet. Proin 
gravida dolor sit amet lacus accumsan et viverra 
ter sR ee dol 让 et onectetuEadiRpiscing justo commodo. Proin sodales pulvinar tempor. 


a MN sn at Verra Cum sociis natoque penatibus et magnis dis 
lsto a 0 TD OM St ds at 3 parturient montes, nascetur ridiculus mus. Nam 
ett i en I fermentum, nulla luctus pharetra vulputate, felis 
串 us mollis orcl， cr CUS EN mn LT 二 和 tellus mollis orci, sed 由 oncus sapien nunc eget. 
图 4-217 


人 @ ”项 目 符号 : 单 击 该 选项 后 面 的 “项 目 符号 ”按钮 ， 会 为 段落 文本 添加 项 目 符号 标志 。 如 图 4-218 
所 示 为 添加 项 目 符号 后 的 效果 。 

加 ”对 齐 : 对 于 文本 段落 元 件 ， 可 以 在 “对 齐 ” 选 项 下 设置 其 文本 的 对 齐 方式 为 左 侧 对 齐 、 居 中 对 
齐 和 右 侧 对 齐 ， 可 以 设置 文本 在 垂直 方向 上 的 对 齐 方式 为 顶部 对 齐 、 垂 直 居 中 和 底部 对 齐 ， 如 

图 4-219 所 示 。 
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“ 最 新 活动 
AN 此 
[AY 
“ 新闻 列表 RF = 
图 4-218 图 4-219 
加 填充: 此 处 的 填充 并 不 是 指 元 件 的 填充 颜色 , 而 是 指 元 件 的 内 容 到 边界 之 间 的 距离 , 默认 情况 下 ， 
每 个 元 件 有 2px 的 填充 ， 如 图 4-220 所 示 。 用 户 可 以 在 “填充 ”选项 下 分 别 为 左 、 上 、 右 和 下 
设置 不 同 的 填充 ， 如 图 4-221 所 示 。 


策 充 在 |2_ El2 上风 l2 EI2 


图 4-220 图 4-221 


创建 和 管理 样式 D 


一 个 原型 作品 通常 由 很 多 页 面 组 成 ， 每 个 页 面 又 由 很 多 元 件 组 成 。 一 个 一 个 地 设置 元 件 样式 既 
费事 又 不 利于 修改 。Axure RP 8.0 提供 了 方便 的 页 面 样 式 和 元 件 样式 ， 既 方便 用 户 快 速 添加 样式 又 便 
于 修改 。 


和 :创建 并 应 用 页 面 样式 ”人 @ 局 
在 页 面 的 空白 处 单 击 ， 在 “检视 ， 页面” 面板“ 样式" 选项 卡 | "ee - 
页 面 样式 


下 显示 页 面 的 “样式 " 参数 。 面板 的 顶端 显示 当前 页 面 的 样式 为 默认 ， | ™ 呈 
如 图 4-222 所 示 。 图 4-222 


实例 15 一 创建 页 面 样式 © 


当 页 面 样式 
创建 完成 后 ， 用 
户 可 以 单 击 默认 
样式 后 面 的 黑色 
三 角形 ， 为 页 面 
选择 不 同 的 样式 ， 并 且 可 以 使 用 
相同 的 方法 ， 将 选择 的 样式 应 用 
到 其 他 页 面 中 。 


* 源 文件 ， 素 材 & 源 文件 \ 第 4 章 \ 创 建 页 面 样式 .rp 


3 》 操 作 视频 :视频 第 4 章 \ 创 建 页 面 样式 .mp4 


en 


凶 单 击 “ 页 面 样式 管理 ”按钮 或 选择 “页 面 样式 管理 ”选项 ,， 打 : 
如 图 4-223 所 示 。 单 击 左 上 角 的 “ 


“页 面 样式 管理 ”对 话 框 ， 
添加 ”按钮 ， 即 可 新 建 一 个 样式 文件 ， 如 图 4-224 所 示 。 


FE 一 | eee 
国 一 ssn pa 
CE se [ ee | ge se 
0 Ey 
a [l= 日 
= 硬 pe mm 
Ce J wm Ce jw 
图 4-223 图 4-224 
加 添加 后 可 以 为 其 指定 一 个 名 称 ， 如 图 4-225 所 示 。 在 对 话 框 的 右 侧 可 以 设置 该 样式 的 各 项 
参数 ， 如 图 4-226 所 示 。 
中 罗 时 法 伯 六 行 在 全 要 入 
es er we y | 
图 4-225 图 4-226 
观 单 击 "确定 "按钮 ， 在 “检视 ”面板 中 即 旬 


建 了 一 个 新 的 页 面 样式 ， 如 图 4-227 所 示 。 
了 葬 双击 “页 面 "面板 中 的 Page1 页 面 ， 进 入 Page1 页 面 的 编辑 状态 ， 在 “检视 ”面板 中 选择 
刚才 创建 的 样式 ， 即 将 该 样式 应 用 到 Page1 页 面 ， 效 果 如 图 4-228 所 示 。 


图 4-227 图 4-228 


和 提 | 建 和 应 用 元 件 样式 同人 全 


元 件 样式 的 创建 与 页 面 样式 的 创建 类 似 。 选 择 页 面 中 的 元 件 ， 如 图 4-229 所 示 ， 单 击 “ 元 件 样 
式 管理 ”按钮 ， 打 开 “ 元 件 样式 管理 ”对 话 框 ， 如 图 4-230 所 示 。 
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一 级 标题 ， | 
图 4-229 图 4-230 


单 击 对 话 框 左上 角 的 “添加 ”按钮 ， 新 建 一 个 名 称 为 “说 明文 字 ” 的 样式 ， 如 图 4-231 所 示 。 
在 对 话 框 的 右 侧 设置 “字体 ”“ 字 体 尺寸 ” "斜体 ”和 “字体 颜色 ”样式 ， 如 图 4-232 所 示 。 


寺 因 XX 4 区 六 体 Arial v- 
Default 同 字体 关 型 Normal Md 
一 级 标 时 
一 可 字体 尺寸 32 ~ 
= 和 同 租 体 [ 国 ] (点 去 切 斤 为 相 体 ) 
三 级 标题 
四 级 标 是 回 人 体 国 点 二 六 为 jh) 
五 级 标题 i 
i 下 划 线 国 | 总 走 切换 为 下 划 续 ) 
文本 入 同 字体 颜色 和 ~ 

图 4-231 图 4-232 


单 击 “确定 ”按钮 ， 完 成 元 件 样式 的 创建 。 选 择 元 件 ， 在 “检视 ”面板 中 选择 “说 明文 字 ” 样式， 
效果 如 图 4-233 所 示 。 


检视 把 形 
(起 形 信 一 
隐藏 丰 
149 46 
实 度 [] 襄 度 
小 SS ce 王 
-BD 
国 7 


编辑 样式 
样式 创建 完成 后 ， 如 果 需 要 修改 样式 ， 可 以 再 次 单 击 “ 样 式 管理 ”按钮 ， 在 打开 的 对 话 框 中 修 
改 样式 的 各 项 参数 ， 如 图 4-234 所 示 。 


图 4-234 
添加 国 : 单 击 该 按钮 ， 将 创建 一 个 新 的 样式 。 
重复 图 |: 单 击 该 按钮 ， 将 复制 选中 的 样式 。 
清除 国 : 单 击 该 按钮 ， 将 删除 选中 的 样式 。 
向 上 / 向 下 国 国 : 单 击 该 按钮 ， 所 选 样式 将 向 上 或 向 下 移动 一 级 。 
复制 : 单 击 该 按钮 ， 将 复制 当前 样式 的 属性 ， 移 动 到 另 一 个 样式 上 再 次 单 击 ， 则 会 将 复制 的 属 
性 替换 该 样式 的 属性 。 


ooocoo 


一 个 样式 可 能 会 被 同时 应 用 到 多 个 元 件 上 ， 当 修改 了 该 样式 的 属性 后 ， 应 用 了 该 样式 的 元 件 将 同时 发 生变 化 。 


3 使 用 格式 刷 © 


格式 刷 的 主要 功能 是 将 元 件 样式 或 修改 后 的 元 件 样式 快速 地 应 用 到 其 他 元 件 上 。 单 击 工具 栏 上 
的 “格式 刷 ”按钮 ， 弹 出 “格式 刷 ” 对 话 框 ， 如 图 4-235 所 示 。 

勾 选 “格式 刷 ” 对 话 框 中 的 “元 件 样式 ” 复 选 框 ， 在 后 面 的 下 拉 列 表 中 选择 “说 明文 字 ” 样 式 ， 
选择 标题 元 件 , 单 击 “应 用 ”按钮 ， 即 可 将 “说 明文 字 ” 样式 快速 指定 给 元 件 , 效果 如 图 4-236 所 示 。 
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图 4-235 图 4-236 


用 户 还 可 以 使 用 “格式 刷 工 具 ”， 快 速 为 个 别 元 件 指定 特殊 的 样式 。 需 要 注意 的 是 ,无 论 是 定义 的 样式 还 是 格 
式 刷 样式 ， 通常 都 只 能 应 用 到 一 个 完成 的 元 件 上 ， 不 能 只 应 用 到 元 件 的 局 部 。 


元 件 的 转换 2 


为 了 实现 更 多 的 元 件 效果 ， 且 便于 原型 的 创建 与 编辑 ，Axure RP 8.0 允许 用 户 将 元 件 转换 为 其 他 
状 ， 并 可 以 再 次 编辑 。 
和 转换 为 形状 0 
将 元 件 拖 入 页 面 中 ， 选 择 元 件 ， 元 件 的 右上 角 出 现 一 个 灰色 圆 点 ， 如 图 4-237 所 示 。 单 击 灰色 
加 点， 弹出 如 图 4-238 所 示 的 对 话 框 。 
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转换 为 自 定义 形状 


图 4-237 图 4-238 
选择 任意 一 个 形状 图 标 , 元 件 将 自动 转换 为 该 形状 , 如 图 4-239 所 示 。 拖 动 图 形 上 的 黄色 控制 点 ， 
可 以 继续 修改 形状 ， 修 改 后 的 效果 如 图 4-240 所 示 。 
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图 4-239 图 4-240 


2 转换 为 自 定义 形状 0 
用 户 如 果 对 Axure RP 8.0 提供 的 转换 形状 不 满意 , 可 以 自 定义 转换 形状 。 单 击 右上 角 的 灰色 原点 ， 
选择 “转换 为 自 定义 形状 ”选项 ， 如 图 4-241 所 示 。 元 件 自动 转换 为 可 编辑 形状 ， 如 图 4-242 所 示 。 


图 4-242 


用 / 
单 击 ， 即 


在 控制 点 上 单 


直线 或 者 


图 4-243 


曲线 
直线 
删除 
图 4-245 


由 两 个 控制 轴 控 制 弧度 ， 拖 动 控制 点 可 以 同 


可 以 直接 拖 动 图 形 的 控制 点 ， 自 定义 形状 效果 ， 如 图 4-243 所 示 。 将 光标 移动 到 
可 添加 一 个 控制 点 ， 多 次 添加 并 调整 ， 效 果 如 图 4-244 所 示 。 


图 


i 
i ~ 寅 


图 4-246 


鼠标 右键 ， 可 以 弹出 如 图 4-245 所 示 的 快捷 菜单 。 用 户 可 以 分 别 选 择 创 建 
删除 当前 控制 点 。 选 择 “ 曲 线 ”命令 后 ， 形 状 将 变 成 曲线 ， 如 图 4-246 所 示 。 


时 调整 两 条 控制 轴 ， 实 现 对 曲线 形状 的 


改变 ， 如 图 4-247 所 示 。 按 下 键盘 上 的 Ct 键 并 拖 动 控制 点 ， 可 以 实现 调整 单个 控制 点 的 操作 ， 如 


线 控制 点 
4-248 所 示 。 


以 


在 


图 4-247 


线 控制 点 上 双击 ， 即 可 将 其 


转换 为 直线 控制 点 ， 效 果 如 图 4-249 


所 示 。 


图 4-248 


图 4-249 
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使 用 “钢笔 工具 ”绘制 或 转换 完 形状 后 ， 用 户 也 可 以 在 工具 栏 中 选择 “边界 点 工具 ”， 进 入 图 形 的 编辑 状态 。 


I 转换 为 图 片 


有 时 为 了 便于 操作 ， 会 将 其 他 元 件 转换 为 图 片 元 件 。 选 择 一 个 元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 
快捷 菜单 中 选择 “转换 为 图 片 ”命令 ， 如 图 4-250 所 示 。 即 可 将 当前 元 件 转换 为 图 片 元件 ， 如 图 
4-251 所 示 。 


i PPT 


攻 创建 元 件 库 BD 


根据 工作 的 需求 ,用 户 可 能 需要 创建 自己 的 元 件 库 。 比 如 说 在 和 其 他 的 UI 设计 师 合作 某 个 项 目 时 ， 
需要 保证 项 目的 一 致 性 和 完成 性 ， 设 计 师 可 以 创建 一 个 自己 的 元 件 库 。 

选择 “元 件 库 ”面板 扩展 菜单 中 的 “创建 元 件 库 ”命令 ， 如 图 4-252 所 示 。 在 弹出 的 “保存 
Axure RP 元 件 库 ” 对 话 框 中 为 元 件 库 命名 ， 如 图 4-253 所 示 。 


下 载 元 件 库 ..(D) i 


载 入 元 件 库 .(D 总 
从 Axureshare 载 入 元 件 库 .- | en 
Wm 
ws 文件 名 (Nk 
ET Amure RP Library Files Crplib) 中 


区 CE Cw] 


图 4-252 国 4253 
击 “ 保 存 ” 按钮 ，Axure RP 会 自动 启动 创建 元 件 库 界 面 ， 如 图 4-254 所 示 。 
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图 4-254 
元 件 库 的 工作 界面 和 项 目 文件 的 工作 界面 基本 一 致 ， 区 别 在 于 以 下 几 点 。 
加 ”工作 界面 的 左上 角 位 置 显示 了 当前 元 件 库 的 名 称 ， 而 不 是 当前 文件 的 名 称 ， 如 图 4-255 所 示 。 
四 “页 面 " a Easy 面板 ， 更 方便 元 件 库 的 新 建 与 管理 ， 如 图 4-256 所 示 。 


文王 昌 机 四 M 项目 (P】 布局 (A 发布 国 队 TT 由 六 (C) 各) 
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图 4-255 4 
四 在 “元 件 库 ” 面 板 中 ， 将 显示 新 建 元 件 库 的 名 称 和 元 件 ， 如 图 4-257 所 示 。 
w 其 元 件 库 三 
Roywang =| 
Y Roywang 
久生 
的 TUT\ 云 休 
图 4-257 
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实例 16 一 创建 元 件 库 © 
Axure RP 为 回 kb 
机 a > 源 文件 ， 素 材 & 源 文件 第 4 章 \ 创 建 元 件 库 rp 
用 户 提供 了 创建 操作 视频 ， 视频 弟 4 间 .| 建 元 伯 库 np4 
元 件 库 的 功能 ， 
使 用 户 不 仅 可 以 
使 用 系统 自 带 的 


元 件 ， 还 可 以 根据 自身 条 件 创建 
元 件 库 ， 方 便 设计 工作 。 


芭 创建 一 个 名 称 为 “用 户 自 建 ”的 元 件 库 ， 如 图 4-258 所 示 。 单 击 “ 保 存 " 技 钥 后， 软件 自 
动 进入 “元 件 库 ” 编 辑 页 面 ， 如 图 4-259 He 


MEDAEY ~ 


FT | Avure RP Library Files (rplib) 


图 4-258 图 4-259 
玛 在 “元 件 库 页 面 ”面板 中 新 建 一 个 页 面 ， 重 新 命名 为 “太阳 ”,， 使 用 现 有 元 件 进行 创建 ， 
如 图 4-260 所 示 。 完 成 后 进行 保存 操作 ， 继 续 在 “元 件 库 页 面 " 面板 中 新 建 一 个 名 称 为 “ 花 淤 ”的 
页 面 ， 双 击 页 面 进 入 元 件 编辑 模式 ， 如 图 4-261 所 示 。 


图 4-260 图 4-261 


基 在 “属性 ”面板 中 选择 “ 自 定义 图 标 ”选项 ， 将 现 有 图 片 导 入 ， 如 图 4-262 所 示 。 使 有 


片 元 件 制作 “ 花 淮 ”元件 ， 如 图 4-263 所 示 。 
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图 4-262 图 4-263 


了 完成 后 进行 保存 操作 ， 返 回 设计 页 面 中 ， 刷 新 元 件 库 ， 如 图 4-264 所 示 。 用 户 可 以 使 用 新 
创建 的 元 件 进行 原型 设计 了 ， 如 图 4-265 所 示 。 


图 4-264 图 4-265 


使 用 外 部 元 件 库 Dp 


在 Axure RP 8.0 中 为 用 户 提供 了 很 多 元 件 。 同 时 还 允许 用 户 载 入 第 三 方 元 件 库 。 互 联网 上 可 以 
找到 很 多 第 三 方 元 件 库 ， 如 图 4-266 所 示 。 
v 提 作 
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图 4-266 


下 下载 元 件 库 DS 


Axure 官方 网 站 上 也 为 用 户 准 备 了 很 多 实用 的 第 三 方 元 件 库 。 在 浏览 器 地 址 栏 中 输入 如 下 地 址 : 
httpYAwww.axure.com/supportAwidget-libraries， 或 者 在 “元 件 库 ”面板 右上 角 单 击 ， 打 开 扩 展 菜单 ， 
选择 “下 载 元 件 库 ”命令 ， 如 图 4-267 所 示 。 浏 览 器 效果 如 图 4-268 所 示 。 
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Axure RP 官方 网 站 的 大 部 分 第 三 方 元 件 库 ， 都 是 需要 付费 才 可 以 下 载 的 。 就 这 需要 用 户 仔细 辨认 网 站 的 真实 性 ， 
以 免 造成 不 必要 的 钱财 损失 。 


图 4-267 图 4-268 
用 户 也 可 以 通过 在 浏览 器 中 搜索 获得 元 件 库 的 下 载 地 址 ， 下 载 后 的 元 件 库 文件 格式 为 rpib， 如 
图 4-269 所 示 。 


品 癌 品 


Android 手机 外 这 及 UI 组 件 库 .rplib Android 组 件 库 .rplib iOS11+lcons+For+Axure+RP+8.rplib 
图 4-269 


人 载 件 库 


下 载 元 件 库 后 ， 选 择 “ 元 件 ” 面 板 扩 展 菜单 中 的 “ 载 入 元 件 库 ” 命 令 ， 如 图 4-270 所 示 。 在 弹 
出 的 “打开 ”对 话 框 中 选择 下 载 的 元 件 库 文件 ， 单 击 “ 打 开 ” 按 钮 ， 如 图 4-271 所 示 。 


编辑 元 件 库 -…(E) 

忆 新 元 件 库 (R) 

钻 载 元 件 库 (U) 
图 4-270 图 4-271 

打开 后 “元 件 ”面板 效果 如 图 4-272 所 示 。 将 元 件 拖 曙 到 页 面 中 ， 效 果 如 图 4-273 所 示 。 


> er 


图 4-272 图 4-273 
用 户 也 可 以 选择 “元 件 ” 面 板 扩展 菜单 中 的 “从 AxureShare 载 入 元 件 库 ”命令 ， 如 图 4-274 所 

示 。 登 录 账 户 后 ， 即 可 在 AxureShare 中 查找 元 件 库 文件 ， 选 择 载 入 ， 如 图 4-275 所 示 。 
[ER 


输入 元 各 库 1 


图 4-274 图 4-275 


如 果 用 户 没有 Axure 账户 ,可 以 选择 先 注册 一 个 ,然后 再 登录 。 将 一 些 常用 的 元 件 库 文件 保存 到 AxureShare 中 ， 


便于 以 后 使 用 。 


© CHIETITED 
二 


[5.11 【人 母 版 的 基本 概念 


母 版 指 的 是 原型 中 一 些 重复 出 现 的 元 素 。 将 重复 


出 现 的 元 素 定义 为 母 版 ， 供 用 户 在 不 同 的 页 面 中 反复 
使 用 ， 和 PowerPoint 中 的 母 版 功能 非常 相似 ， 母 版 通 
常 都 被 保存 在 “ 母 版 ”面板 中 ， 如 图 5-1 所 示 。 


一 个 原型 产品 中 的 头 部 和 底部 通常 会 出 现在 每 一 


个 页 面 中 ， 登 录 页 和 搜索 条 也 会 经 常 出 现在 不 同 的 页 


| 


中 ， 如 图 5-2 所 示 。 


-ea 
5 本 Bo 
加 新 母 版 1 
加 新 版 2 
加 新 号 牧 3 
图 5-1 
-3 VISA EC 


在 页 面 中 使 用 母 版 ， 既 能 保持 整体 页 面 设计 风格 的 一 致 ， 又 便于 修改 页 面 。 


对 母 版 进行 修改 ， 所 有 页 面 中 应 用 的 该 母 版 都 会 自动 更 新 ， 节 省 了 大 量 的 工作 时 间 。 
导 版 页 面 中 的 说 明 只 需要 编写 一 次 ， 避 免 了 在 输出 交互 规范 文档 时 增加 工作 量 或 出 现 错误 。 


第 5 章 Axure RP 母 版 的 使 用 ， 


一 般 情 况 下 ， 一 个 页 面 中 有 如 下 部 分 可 以 制作 成 母 版 。 


站 导航 。 

站 header( 头 部 )， 包 括 网 站 的 Logo。 

站 Footer( 尾部 )。 

径 常 重复 出 现 的 元 件 ， 比 如 说 分 享 按钮 。 

ab 面板 切换 的 元 件 ， 在 不 同 页 面 同一 个 Tab 面板 有 不 同 的 呈现 。 


1 沈 司 加 


ooogooc 


母 版 的 使 用 也 会 减 小 Axure RP 文件 ， 加 快 原型 文件 的 预览 速度 。 


创建 和 编辑 母 版 D 


在 Axure RP 8.0 中 ， 母 版 通常 被 保存 在 “ 母 版 ”面板 中 ， 如 图 5-3 所 示 。 用 户 在 “ 母 版 ”面板 
中 可 以 完成 母 版 文件 的 新 建 、 文 件 夹 的 新 建 、 子 母 版 文件 的 新 建 和 查找 母 版 等 操作 。 
图 本 省 - AureRP8 :用 KK < 中 XX 折 : wwwaxurecomcniEK ES VI 二 已 所 攻击 


文件 从 编 铝 {E) 视图 (V) 项 目 (P) 布局 (A) 发 布 (P) 局 队 (] 账户 (CO 帮助 (H) 


岛 ¥ je 
Demmaxn*m| 耳 网 口语 … Tom - = 咱 DO 
Er Cs a a 下 到 可 其 可 着 


| 


Con BD lee CC 一 CE Fr 下 可 天 到 | 局 区 | 到 | mel mn mm 
栓 入 可 般 


2 和 创建 母 版 © 


单 击 “ 母 版 ”面板 右上 角 的 “添加 母 版 ”按钮 ， 即 可 新 建 一 个 母 版 文件 ， 如 图 5-4 所 示 。 用 户 
可 以 为 新 添加 的 母 版 命名 ， 如 图 5-5 所 示 。 


K 二 版 | | 

Eee 添加 母 版 

I EE 

导航 栏 | 版 许 | 

新 母 版 1 | 导航 栏 | 
画 语 上 oo | 

图 5-4 图 5-5 
实例 17 一 绘制 手机 状态 栏 © 


同一 个 项 目 中 ， 可 能 会 有 多 个 母 版 ， 为 了 方便 母 版 的 管理 ， 用 户 可 以 通过 新 建 
文件 夹 将 同类 或 相同 位 置 的 母 版 分 类 管理 。 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


* 源 文件 ， 素 材 &% 源 文件 第 5 章 \ 绘 制 手机 状态 栏 .p 
* 操 作 视频 : 视频 第 5 章 \ 绘 制 手机 状态 栏 mp4 


会 驳 分 12:36 人 加 


到 单 击 “ 母 版 "面板 右上 角 的 “添加 文件 夹 " 按 钮 , 即 可 在 面板 中 新 建 一 个 文件 夹 ,如 图 5-6 所 示 。 
用 户 可 以 选择 一 个 母 版 文件 , 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 "添加" 命令 , 可 以 添加 文件 来、 
母 版 或 子 母 版 ， 如 图 5-7 所 示 。 


本 版 DQ 
国 Heade 
国 版 府 
二 版 对 EN 国 SW 
Header | 国 网 站 Logo 
添加 0 文 件 夫 有 本 
版 放 国文 HD Cerl+Shift+Return 添加 (A) » 
导航 栏 篇 上方 添 H0 母 板 (8) 移动 (M) ， 
网 站 Logo 大 下 方才 I0S 株 (A) Cerl+Return 名 ieD) 
mm EE 了 NR 重合 名 (R) 
复制 » 
图 5-6 图 5-7 


静 为 母 版 文件 夹 和 子 母 版 重 命名 ， 如 图 5-8 所 示 。 在 “顶部 栏 " 子 母 版 页 面 中 , 添加 和 矩形 元 件 ， 
并 修改 元 件 的 宽 高 和 填充 颜色 ， 如 图 5-9 所 示 。 


母 版 菩 Q 
Header 
版 庭 
导航 栏 
图 网 站 Logo 
4 Bm Android 
顶部 栏 


图 5-8 图 5-9 


码 选择 lcons 元 件 库 , 从 中 选择 " 满 格 电池 " 元 件 拖 入 页 面 中 , 如 图 5-10 所 示 。 在 “检视 : 形状 
外 中 修 改元 件 的 第 夺 频 人 为 日， 如 图 5-11 所 示 。 


检 入 形状 [ 
0] 
= wm" 
位 置 *" 尺 寺 多 划 [| 
1029 | [198 EE 2 


= lcon: 人 久 
苇 讽 [ms 
b= EELE4 
边框 EEIEENEE 
图 5-10 图 5-11 


> 


双修 改 完成 后 ， 元 件 样式 如 图 5-12 所 示 。 在 元 件 中 添加 文字 内 容 ， 并 且 使 用 相同 方法 完成 相 
似 内 容 的 操作 ， 如 图 5-13 所 示 。 


图 5-12 


川 倒 多 12:36 8 全 
图 5-13 


有 用 户 可 以 使 用 鼠标 直接 拖 动 文件 夹 或 者 页 面 到 相应 的 位 置 , 如 图 5-14 所 示 。 也 可 以 选择 " 移 
动 ”命令 改变 母 版 文件 (位 置 )， 如 图 5-15 所 示 。 


和 版 Do. 二 EE 
可 andna 
Header 从 ， me 
版 证 人 一 = 一 
国 乏 jn(A) | 
加 称 动 (M) RB"* T te cadxT 
网 站 Logo | sD) 
加 
4 Mm Androd 重 会 名 (R) = BD ca 一 
顶部 栏 复制 "| 有 RO) culr— | 
新 所 版 1 拖 放 行为 (B) 
添加 到 R 画 中 -(A) 
从 页 面 中 移 除 -….(R) 
使用 情况 -(U) 
图 5-14 图 5-15 


9 编辑 母 版 ”J 


击 “ 母 版 ”面板 中 的 母 版 文件 ， 即 可 进入 母 版 编辑 状态 ， 在 页 面 标签 栏 会 显示 当前 编辑 的 母 
版 名 称 ， 如 图 5-16 所 示 。 用 户 即 可 使 用 各 种 元 件 创建 母 版 页 面 ， 如 图 5-17 所 示 。 


TFT EB RR ene ri GE WL 
SN ur Eh WO woe 


国 了 产 mv .»0 @ 加， sw 


| 
!| 


= ' 
A on 
EE = 


[a | “ex: index 
100 
图 5-16 图 5-17 
创建 完成 后 ， 执 行 “文件 ”>“ 保 存 ” 命 令 ， 将 母 版 文件 保存 ， 即 可 完成 母 版 的 编辑 操作 。 
实例 18 一 一 网 页 线 框图 @€) 
除了 可 以 通过 新 建 母 版 的 方式 创建 母 版 ，Axure RP 8.0 也 允许 用 户 将 制作 完成 


的 页 面 转换 为 母 版 文件 ， 为 用 户 提供 方便 自由 的 创建 方式 。 
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芭 在 想 要 转换 为 母 版 | ， 源 文件 ， 素 材 & 源 文件 第 5 章 \ 网 页 线 框图 
的 页 面 中 选择 全 部 或 局 部 内 “| 操作 视频 , 视频 各 5 网页 线 必 图 mp4 
容 ， 如 图 5-18 所 示 。 单 击 鼠 


标 右键 ， 在 弹出 的 快捷 菜单 |Product EU 

中 选择 “转换 为 母 版 " 命令 ， 

如 图 5-19 所 示 。 
about 
Lorom ipeum dolor st amet concectotur adipiscrg on em orth met ree dpe 
alt. Aenean euismod bioendum lecrset. Pron Sih. Aenean esmod bibendum laoreet Prom 
gaida dclor sit smet lacus accumsan et era mida dolor si amet lacus accumsan et vvena 

commodo. Proin Secales Pukinar ternpot lo Sodales PUMnar tempor 

Cum soere vatogpe ponabbos ot mage ee om snre ea poratbus ot magnie eo 
fermentum nula luctus pharetra wlputate felis fermentum, nula ctus pharetra wlputate, folis 
telus molis orci sed honcus sapen nunc eget ‘telus molls arci sed rhoncus sapien nunc el- 


WE 


图 5-18 


弹出 “转换 为 母 版 对话 杠 ， 如 图 5-20 所 示 。 为 其 指定 名 称 , 选择 一 种 拖 放行 为 ， 


续 ” 按 钮 ， 即 可 完成 母 版 的 转换 ， 如 图 5-21 所 示 。 


单 击 “ 继 


5-20 5-21 


转换 为 母 版 后 的 元 件 ， 将 以 一 种 半 透 明 的 红色 遮 单 显示 。 


砚 ) Axure RP 8.0 允许 母 版 中 再 套用 子 母 版 ， 这 样 使 母 版 的 层次 更 加 丰富 ， 应 用 领域 更 加 广泛 。 


单 击 “ 母 版 ”面板 右上 角 的 “新 建 母 版 ”按钮 ， 新 建 一 个 名 称 为 “产品 列表 ”的 母 版 ， 如 


图 5-22 所 


示 。 双 击 “ 产 品 列表 ” 母 版 ， 进 入 母 版 页 面 ， 将 “产品 说 明 ” 母 版 从 “ 母 版 ”面板 中 拖 入 页 面 中 ， 


如 图 5-23 所 示 。 
观 执行“ 文件 >“ 保存” 命令 ， 即 可 完成 子 母 版 的 创建 。 


第 5 章 Axure RP 母 版 的 使 用 


图 5-22 


3 下岗 除 母 版 GC 


对 于 拖 入 页 面 中 的 母 版 ,选中 后 , 直接 按键 盘 上 的 Delete 键 , 即 可 将 其 删除 。 在 “ 母 版 " 面板 中 ， 
选中 想 要 删除 的 母 版 ,按键 盘 上 的 Delete 键 或 者 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 "删除 "命令 ， 


完成 母 版 的 创建 后 ， 用 户 可 以 通过 多 种 方法 将 母 版 应 用 到 页 面 中 。 当 修改 母 版 内 容 时 ， 页 面 中 
应 用 的 该 母 版 也 会 随 之 发 生变 化 。 


过 二 指 放行 为 

用 户 可 以 通过 拖 蝶 的 方式 ， 将 母 版 文件 拖 入 页 面 中 。 双 击 “页面 ” 面 板 中 的 一 个 页 面 ， 进 入 编 
辑 状 态 。 在 “ 母 版 ”面板 中 选择 一 个 母 版 文件 ， 将 其 直接 拖 入 页 面 中 ， 如 图 5-25 所 示 ， 即 可 完成 母 
版 的 使 用 。 


HN WSIE) MEIV) REP) 3A) OS) EM EO WR 

[BE 

car [| 
[ 
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使 用 直接 拖 放 的 方式 应 用 母 版 ， Axure RP 8.0 提供 了 3 种 不 同 的 方式 供用 户 选择 。 在 “ 母 版 ” 
板 中 的 文件 上 单 击 鼠标 右键 ， 弹 出 如 图 5-26 所 示 的 快捷 菜单 。 用 户 可 以 选择 “任意 位 置 ” “固定 位 
置 ” 和 “脱离 母 版 ”3 种 拖 放行 为 。 
1. 任意 位 置 


任意 位 置 行为 是 母 版 的 默认 行为 ， 将 母 版 拖 入 页 面 中 的 任意 位 置 ， 当 修改 母 版 时 ， 所 有 引用 该 
母 版 的 原型 设计 图 中 母 版 实例 都 会 同步 更 新 ， 只 有 坐标 不 会 同步 。 更 改行 为 后 ， 母 版 图 标 改变 ， 效 
果 如 图 5-27 所 示 。 

A 站 吾 产 a 
移动 (M) » [3 
名 到 SID) 三 FRR | 未 io) 
重 命名 (R) 加 产品 列表 移动 (M) 
RO . 2 
拖 斤 行为 (B) RN "| v {ESP) 
和 脱 志 母 厂 (B) | 一 人 a 
从 页 面 中 移 除 .(R) 机 西 中 称 除 _IR) A 
使 用 情况 -(U) 使 用 情况 (U) 
图 5-26 图 5-27 


默认 情况 下 选择 的 是 “任意 位 置 ”选项 ， 用 户 可 以 在 页 面 中 随意 拖 动 母 版 文件 到 任何 位 置 ， 但 
只 能 更 改 母 版 文件 的 位 置 ， 不 能 设置 其 他 参数 ， 如 图 5-28 所 示 。 


固定 位 置 是 指 将 母 版 拖 入 页 面 中 后 ， 母 版 实例 中 元 素 的 坐标 会 自动 继承 母 版 页 面 中 元 素 的 位 置 ， 
不 能 修改 。 和 “任意 位 置 ”选项 一 样 ， 对 母 版 所 做 的 修改 也 会 立即 更 新 到 原型 设计 母 版 实例 中 。 更 
改行 为 后 ， 母 版 图 标 改 变 ， 如 图 5-29 所 示 。 
«x ET D 。 Ee Dma 
( 厅 去 名 动 et 
me -| PP 
名 要" 尺 二 Mm 二 移动 M) 
258 150 0% 四 | 名 sD) 
一 一 更 变 【] 庄 变 重合 名 (R) 
es 四 医 = 了 各 制 攻 
Defaut ~ [ET 
二 一 a 
= 二 只 珊 面 中 移 险 .(R) 脱 高 母 航 (B) 
了 加 国 司 . 
7 i) RU) 
图 5-28 图 5-29 


在 母 版 文件 上 单 击 右键 ， 在 
弹出 的 快捷 菜单 中 选择 “ 拖 放生 


面 中 ， 模 板 将 以 固定 位 置 出 现 。 将 
光标 移动 到 母 版 上 方 ， 光 标 不 会 变 
为 十 字形 状 ， 因 为 母 版 被 锁定 在 固 ”| 二 
定位 置 , 无 法 移动 , 如 图 5-31 所 示 。 ee 


图 5-30 图 5-31 
区 可 


为 ”>“ 固 定位 置 ” 命 令 ， 如 图 
5-30 所 示 。 再 次 将 母 版 文件 拖 入 页 @\Y COMPANY NAME 


母 版 元 件 四 周 出 现 红色 的 虚 | 符 员 :10G0 D 
线 ， 代 表 当 前 元 件 为 固定 位 置 | (LOGO 各 黎 
母 版 。 该 母 版 将 固定 在 (x200， 
y:200) 的 位 置 ， 不 能 移动 ， 如 图 
5-32 所 示 。 双 击 该 元 件 ， 即 可 进 
入 该 母 版 文件 内 ， 用 户 可 以 对 其 
进行 再 次 编辑 。 保 存 后 ，index 页 
中 的 母 版 元 件 将 同时 发 生变 化 。 | 


采用 “固定 位 置 ” 方式 拖 入 的 母 版 元 件 , 默认 情况 下 为 锁定 状态 , 单 击 工具 栏 上 的 “解除 锁定 位 置 和 尺寸 " 按钮， 
弹出 如 图 5-33 所 示 的 对 话 框 。 根 据 提示 , 用户 可 以 在 母 版 元 件 上 单 击 右键 , 选择 “脱离 母 版 " 命令 , 如 图 5-34 所 示 。 
即 可 脱离 母 版 ， 自 由 移动 。 


脱离 母 版 后 的 母 版 文件 将 单独 存在 ， 不 再 与 母 版 文件 有 任何 的 关联 。 
.脱离 母 版 。 

脱离 母 版 是 指 将 母 版 拖 入 页 面 中 后 , 母 版 实例 将 自动 脱离 母 版 , 成 为 独立 的 内 容 , 可 以 再 次 编辑 ， 
而 且 修 改 母 版 对 其 不 再 有 任何 影响 。 更 改行 为 后 ， 母 版 图 标 改变 ， 如 图 5-35 所 示 。 


¥ wum 


Alert 


To unlock this master, right click and uncheck 
"Lock to Location in Master in the context menu. 


Ce] 


图 5-33 


实例 19 一 网 站 图 标 摆 放 位 置 ~ 让 


Axure RP 为 用 户 提 加 ts 
供 了 母 版 在 拖 放 行为 时 阐 
的 3 种 摆 放 位 置 ， 分别 ” 卉 并 
是 “任何 位 置 ” “国定 。 岂 3 
位 置 ” 和 “脱离 母 版 ”。 
下 面 来 操作 演示 不 同 的 摆 放 位 置 会 有 怎 上 


样 不 同 的 效果 。 | pA 台所 
到 在 “ 母 版 ”面板 中 新 建 一 个 名 


为 “个 人 标志 ”的 母 版 文件 ， 如 图 5-36 


所 示 。 双 击 进入 母 版 文件 ， 拖 自 图 片 元 件 1 YAU 
到 页 面 中 ， 并 导入 图 片 ， 效 果 如 图 5-37 上 
所 示 。 
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图 5-36 图 5-37 


双 在 “检视 :图 片 ”面板 中 修改 其 坐标 为 X:125,Y:125)， 如 图 5-38 所 示 。 更 改 “ 个 人 标志 ” 
母 版 的 拖 放行 为 为 “固定 位 置 ”选项 ， 如 图 5-39 所 示 。 


位 置 " 尺 二 机 数 回 3 
900 405 . ama 
宽度 [] 志 度 = - 
wom 
有 四书 本 
mean 
sm 
-BB 本 
填充 a Ww warm 
Mg R) 
阴影 -| 国 Mm) 
边框 皇 -| | -|[ 芝 = 
图 5-38 图 5-39 


静 返回 ndex 页 面 , 将 “个 人 标志 ”元 件 从 “ 母 版 ”面板 中 拖 入 页 面 中 ， 如 图 5-40 所 示 。" 检 
视 : 个 人 标志 ”面板 如 图 5-41 所 示 。 


六 杭 . 个 人 标志 D 


RK 


二 充 
日 下 影 豆 
起 El 边框 ] 
图 5-40 图 5-41 
52 添加 到 页 面 © 


除了 采用 拖 动 的 方式 应 用 母 版 外 ， 还 可 以 通过 “添加 到 页 面 中 ”命令 完成 母 版 的 使 用 。 在 母 版 
文件 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 到 页 面 中 ”命令 ， 如 图 5-42 所 示 ， 弹 出 “ 添 
加 母 版 到 页 面 中 ”对 话 框 ， 如 图 5-43 所 示 。 


园 nm 中 基本 
添加 < 顶部 > 到 下 列 页 面 
2Dwx | 泪 
看 口 paoet 弃 
ED paoez 
回 D neoe 证 
二 in) + 
移动 M) 
有 seD) 
重 全 名 (R) 为 
重复 (0 | O iee | 
拖 放 行为 (8) » | 一 | 
EE 
com== | 
从 页 面 中 移 除 (R) 启明 : 此 友人 无 流入 | 
使 用 情况 _(U) Cm [| mm |] 
图 5-42 图 5-43 
用 户 可 以 在 对 话 框 的 顶部 选择 添加 母 版 的 页 面 ， 如 图 5-44 所 示 。 可 以 同时 选择 多 个 页 面 添加 母 


版 ， 如 图 5-45 所 示 。 


添加 < 顶部 > 到 下 列 页 面 : 添加 < 顶部 > 到 下 列 页 面 : 
4 周口 ndex 4 D ndex 
辐 OD page1 | WD page1 
OD page2 [VI DO page2 
| 国 口 page3 | 加 口 page3 
| | 
图 5-44 图 5-45 


在 对 话 框 右 侧 有 4 个 按钮 ， 可 以 帮助 用 户 快速 


添加 < 顶部 > 到 下 列 页 面 
选择 页 面 ， 应 用 母 版 。 分 别 是 全 部 选中 、 全 部 取消 、。 | 三 
选中 全 部 子 页 面 和 取消 全 部 子 页 面 , 如 图 5-46 所 示 。 | ”同日 Wasi 
加 “全 部 选中 : 单 击 该 按钮 ， 将 选中 所 有 页 面 。 | 
加 “全 部 取消 : 单 击 该 按钮 ,将 取消 所 有 页 面 的 选择 。 pooe: 
名 ”选中 全 部 子 页 面 ; 单 击 该 按钮 ， 将 选中 所 有 子 
页 面 。 
加 ”取消 全 部 子 页 面 : 单 击 该 按钮 ， 将 取消 所 有 子 
页 面 的 选择 。 
用 户 可 以 选择 “锁定 为 母 版 中 的 位 置 ”， 将 母 S46 


版 添加 到 指定 的 位 置 ， 也 可 以 通过 指定 坐标 为 母 版 指定 一 个 新 的 位 置 ， 如 图 5-47 所 示 。 
勾 选 “ 填 于 底层 ” 复 选 框 ， 当 前 母 版 将 会 添加 到 页 面 的 底层 ， 如 图 5-48 所 示 。 


位 置 一 一 一 一 一 一 一 -位 置 - 
| 回 锁 十 为 号 版 中 的 位 置 | | @ 钙 二 为 9 版 中 的 位 置 
| 〇 指定 新 的 位 轩 〇 指定 新 的 位 置 
Left 0 px Top: 0 px Left 0 px Top 0 px 
| 口 秆 于 底层 


图 5-47 图 5-48 


从 页 面 中 移 除 四 


户 可 以 一 次 性 将 多 个 页 面 的 母 版 移 除 。 在 “ 母 版 ”面板 中 选择 要 移 除 的 母 版 文件 ， 单 击 鼠 标 
右键 ， 在 弹出 的 快捷 菜单 中 选择 “从 页 面 中 移 除 ”命令 ， 如 图 5-49 所 示 ， 弹 出 “从 页 面 中 移 除 母 版 ” 
对 话 框 ， 如 图 5-50 所 示 。 


拖 放行 为 (B) 机 
添加 到 页 面 中 .…(A) 


使 用 情况 .(U) 
图 5-49 图 5-50 
在 页 面 列表 中 选择 想 要 移 除 母 版 的 页 面 ， 单 击 “ 确 定 ”按钮 ， 即 可 完成 移 除 母 版 的 操作 。 


使 用 “添加 到 页 面 中 ”和 “从 页 面 中 移 除 ”命令 添加 或 删除 母 版 的 操作 是 无 法 通过 “撤销 ”命令 撤销 的 ， 需 要 
重新 再 次 操作 。 


母 版 使 用 情况 Dp 


为 了 便于 查找 和 修改 母 版 ，Axrue RP 8.0 提供 了 母 版 的 使 用 情况 供用 户 参考 。 在 “ 母 版 ”面板 上 
选择 需要 查看 的 母 版 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “使 用 情况 ”命令 ， 如 图 5-51 所 示 。 
在 弹出 的 “ 母 版 使 用 情况 ”面板 中 显示 当前 母 版 的 使 用 情况 ， 如 图 5-52 所 示 。 


图 人 二 使 用 情况 攻 本 | 
添 h0(A) 人 index 
移动 (M) » page1 
外 型 除 (D) page2 
重 命名 (R) 
重复 (QO » 
拖 放 行为 (B) 
添加 到 页 面 中 .…(A) 
从 页 面 中 移 除 .…(R) | 
Ce ] 
图 5-51 图 5-52 
在 “ 母 版 使 用 情况 ”面板 中 可 以 查看 应 用 当前 母 版 的 母 版 文件 和 页 面 文件 ， 单 击 面板 中 的 选项 ， 


即 可 快速 进入 相应 母 版 或 页 面 中 。 


和 公式 等 知识 


的 原型 作品 。 要 提高 


使 用 变量 


Axure RP 8.0 中 的 变量 是 一 个 非常 有 个 性 和 使 
判断 或 者 需要 传递 参数 的 功能 逻辑 就 可 以 实现 了 ， 大 大 和 


局 变量 和 局 部 变量 两 种 ， 接 下 来 逐一 进行 讲解 。 


全 局 变量 是 一 个 数据 容器 ， 就 像 一 个 硬盘 ， 可 以 把 需要 的 内 容 存 入 ， 方 便携 带 。 在 需要 的 时 候 


读 取 出 3 
个 全 局 也 不 是 指 整 个 原型 文件 内 的 所 有 页 面 通 


下 只 包含 一 个 全 局 变量 


价值 的 功能 ， 有 了 变量 之 后 ， 很 多 需要 复杂 条 件 
E 富 了 原型 演示 的 可 实现 效果 。 变 量 分 为 全 


末 


全 局 变量 作用 范围 为 一 个 页 面 内 ， 即 “页 面 " 


面板 中 一 个 节点 ( 不 包含 子 节点 ) 内 有 效 ， 所 以 这 


列 编辑 ”对 话 框 中 单 击 “ 设 置 变 量 值 ” 


在 “ 


中 选择 设置 全 局 变量 值 ， 如 图 6-2 所 示 。 


oo 


于 ames 


， 还 是 有 


定 的 局 限 性 。 


动作 选项 ， 对 话 框 效果 如 图 6-1 所 示 。 默 认 情况 


: OnLoadVariable。 勾 选 OnLoadVariable 复 选 框 ， 用 户 可 以 在 下 面 的 下 拉 列 表 


诸 几 证 


有 


如 有 好 
证 


注 | 
十 


洲 由 


[Ei 


图 6-1 


Axure RP 8.0 一 共 提 供 了 9 种 全 局 变量 值 供 
值 : 直接 附 一 个 常量 ， 数 值 、 字 符 串 都 可 以 。 
变量 值 : 获取 另外 一 个 变量 的 值 。 

变量 值 长 度 : 获取 另外 一 个 变量 的 值 的 长 度 。 


户 使 


图 6-2 


， 具 体 功能 如 下 。 
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子叶 Oooocoocooc 


元 件 文字 : 获取 元 件 上 的 文字 。 

焦点 元 件 文字 : 获取 焦点 元 件 上 的 文字 。 

元 件 文字 长 度 : 获取 元 件 文字 的 值 的 长 度 。 
被 选项 : 获取 被 选择 的 项 目 。 

选中 状态 : 获取 元 件 的 选中 状态 。 

面板 状态 : 获取 面板 的 当前 状态 。 

户 可 以 通过 单 击 “ 用 例 编辑 ”对 话 框 


侧 的 “添加 全 局 变量 ”选项 ,创建 一 个 新 
全 


局 变量 ， 如 图 6-3 所 示 。 
在 弹出 的 “全 局 变量 ”对 话 框 中 单 击 


“添加 ”按钮 ， 即 可 新 建 一 个 全 局 变量 ， 如 


图 


6-4 所 示 。 用 户 可 以 重新 对 变量 命名 ， 以 


便于 查找 和 使 用 ， 如 图 6-5 所 示 。 


中 ms 
En enable 


本 Cy _ 
图 6-4 图 6-5 
用 户 可 以 通过 使 用 “上 移 ” 和 “下 移 ” 本 村 动作 
功能 调整 全 部 变量 的 顺序 。 使 用 “清除 ” 功 远近 要 设置 的 全 局 变量 返 j0 全 局 变量 
能 将 选中 的 全 局 变量 删除 。 单 击 " 确 定 "按钮 ， 后 onLoadvarabe 
即 可 完成 全 局 变量 的 创建 ， 如 图 6-6 所 示 。 
图 6-6 


一 个 数据 容器 , 就 像 一 个 云 空间 ， 
[以 把 需要 的 内 容 存 入 ， 在 需要 


于 


的 


别 


实例 20 一 一 制作 按钮 单 击 效 果 


时 候 读 取出 来 使 用 。 
WD 新 建 Axure RP 文档 , 分 
将 “一 级 标题 ”元 件 和 “主要 按钮 ”元 件 拖 入 页 


用 户 可 以 把 全 局 变量 理解 为 国 


中 


， 如 图 6-7 所 示 。 然 后 将 两 个 元 件 命名 为 “内 


容 ” 和 “按钮 ”， 并 修改 元 件 文字 ， 如 图 6-8 所 示 。 


* 源 文件 ， 素 材 & 源 文件 第 6 章 制 作 按 钮 单 击 效果 .mp 
* 操作 视频 :视频 第 6 章 \ 制 作 按钮 单 击 效果 .mp4 


欢迎 使 用 Axure 制 | 
作 产 品 原 型 设计 


ER 


图 6-7 图 6-8 
加 双击 “属性 "选项 卡 下 的 “页 面 载 入 时 "选项 , 如 图 6-9 所 示 。 在 “用 例 编辑 " 对 话 框 中 添加 " 设 
置 变量 值 ”动作 ， 如 图 6-10 所 示 。 


= 
Y 交互 
十 运用 例 


和 


RR OR 


图 6-9 


Cm 驱 - 
图 6-10 


了 单 击 “添加 全 局 变量 " 选项 , 新 建 一 个 名 为 bianliang 的 全 局 变量 ,如 图 6-11 所 示 。 单 击 “ 确 


定 


”按钮 ， 勾 选 bianliang 复 选 框 ， 输 入 变量 值 ， 如 图 6-12 所 示 。 


ER 动作 配 轩 动作 
4 运 反 要 讼 要 的 全 局 冯 县 到 h0 全 局 训 量 
多 讼 村 再 于 bantmno - 隐 渤 全 用 ArursSE 
再 ontoadverabe 
加 banangto~ 
讼 村 全 局 赤 生 信 为 : 
| 年 7 FREERArursayE 产 品 三] fx 
[| 


图 6-11 
双 单 击 " 确 定 " 按钮 ,检视 : 矩形 " 面板 效果 如 图 6-13 所 示 。 选择 按钮 元 件 , 双击 “鼠标 单 击 时 ” 
件 ， 添 加 “设置 文本 ”动作 ， 勾 选 “ 标 题 ” 复 选 框 ， 设 置 “ 变 量 值 ”为 wenzi， 如 图 6-14 所 示 。 
到 单 击 "确定 ”按钮 ， 页 面 效 果 如 图 "按钮 ， 页 面 预览 效 
果 如 图 6-16 所 示 。 


Ce wm ] 
图 6-12 


6-15 所 示 。 单 击 工具 栏 上 的 “预览 


Ka 
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ep 
0 欢迎 使 用 Axure 制 
变量 内 容 。” 作 产 品 原型 设计 


图 6-16 


过 相 】 局 部 交 量 


局 部 变量 作用 范围 为 一 个 Case 里 面 的 一 个 事务 ， 一 个 事件 里 面 有 多 个 Case， 一 个 Case 里 面 有 


多 个 事务 ， 可 见 局 部 变量 的 作用 范围 非常 小 。 例 如 在 Case 里 面 要 设置 一 个 条 件 的 话 ， 如 果 用 到 了 局 
部 变量 ,这 个 变量 只 在 这 个 条 件 语句 里 面 生效 。 且 局 部 变量 只 能 依附 于 已 有 组 件 使 用 , 不 能 直接 赋值 
这 个 特点 从 局 部 变量 所 支持 的 赋值 功能 中 可 以 看 出 。 从 这 点 来 看 ， 全 局 变量 比 局 部 变量 要 多 3 个 赋 
值 方法 。 
局 部 变量 在 编辑 什 / 文本 的 界面 中 进行 创建 ， 通过 在 “插入 变量 或 函数 ”列表 中 选取 使 有 
添加 “设置 变量 值 ”动作 , 单 击 “ 用 例 编辑 ”对 话 框 右 下 角 的 仪 按钮 ,弹出 “编辑 文本 ” 对 活 框 ， 
在 对 话 框 下 部 可 添加 局 部 变量 ， 如 图 6-17 所 示 。 单 击 “ 添 加 局 部 变量 ”选项 ， 即 可 添加 一 个 局 部 变 
量 ， 如 图 6-18 所 示 。 


一 | 下 mm 
ns 人 M0 : 插入 二 量 jOnL oadvarlable] 才 二 生 为 交 鲁 OnLoadvafiadle 的 - 方 荣 和 二 输入 文 二 交 晤 全 公营 入 达 式 要 三 在 :插入 安 量 1OnLoadvariableij 返 加 全 为 杰 量 "OnLoadvaniable- 
ee 六 | | Se eo a a | 
er | maze 
| 

月 区 冯 生 后 部 吉 生 

A hes 三 

Has 

Ce ww Ce 台 
图 6-17 图 6-18 


局 部 变量 能 够 在 创建 时 获取 多 种 类 型 的 数据 ， 如 图 6-19 所 示 。 局 部 变量 在 应 用 时 的 作用 范围 决 


定 了 其 只 能 充当 事务 里 面 的 赋值 载体 
不 会 在 外 部 页 面 级 的 逻辑 中 看 到 。 


因 


此 


因此 更 多 的 是 在 函数 当中 用 到 ， 充 当 函 数 的 运算 变量 ， 


图 6-19 


用 户 可 以 为 动作 设置 条 件 ， 实 现 控制 动作 发 生 的 时 机 。 单 
6-20 所 示 。 弹 出 “条 件 设立 ”对 话 框 ， 


按钮 ， 如 图 


如 图 6-21 所 示 。 


图 6-20 


日 
确定 条 件 之 问 的 逻辑 关系 - 澳 se 呈 “ores| 
[EEC 


用 来 进行 逻辑 判断 的 值 = 涂 | 


确定 变量 或 元 件 名 称 
逻辑 判断 的 运算 符 


EE 


PE 


输入 框 


逻辑 判断 的 运算 符 


1” | 


Cae wm | 


图 6-21 


“用 例 编辑 ”对 话 框 中 的 “添加 条 件 ” 


用 来 选择 被 比较 的 值 


名 ”确定 条 件 之 间 的 逻辑 单 击 “ 全 部 "后 面 的 向 下 箭头 , 可 以 看 到 条 件 逻 辑 关 系 中 有 两 种 关系 , 即 “ 全 


部 ”关系 和 “任何 ”关系 。 


全 部 :必须 同时 满足 所 有 条 件 编辑 器 中 的 条 件 ， 用 例 才 有 可 能 发 生 。 
任何 : 只 要 满足 所 有 条 件 编辑 器 中 任何 一 个 条 件 ， 用 例 就 会 发 生 。 


可 以 通过 设置 条 件 逻辑 关系 , 设置 执行 一 个 动作 必须 


同时 满足 多 个 条 件 , 或 者 仅 需 满足 多 个 条 件 中 的 任何 一 个 。 


名 ”用 来 进行 逻辑 判断 的 值 : 在 该 选项 的 下 拉 菜 单 中 会 有 14 种 选择 值 的 方式 ， 如 图 


值 : 自 定 义 变量 值 。 


变量 值 ， 能 够 根据 一 个 变量 的 值 来 进行 逻辑 判断 。 例 如 ， 可 以 添加 一 个 变量 叫 


作 日 期 ， 并 


断 只 有 当日 期 为 3 月 18 日 的 时 候 ， 才 发 生 HAppy Birthday 的 用 例 。 


变量 值 长 度 : 在 验证 表单 的 时 候 ， 要 验证 用 


田 


元 件 文字 : 


户 选择 的 用 户 名 或 者 是 密码 长 度 。 


明 来 获取 某 个 文本 输入 框 文本 的 值 。 


6-22 所 示 。 


且 判 


品 Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


元 件 文字 长 度 : 与 变量 值 长 度 是 相似 的 ，? 只 是 判断 的 是 某 个 元 件 的 文本 长 度 。 

被 选项 : 可 以 根据 页 面 中 某 个 复 选 框 元 件 的 选中 与 否 来 进行 逻辑 判断 。 

面板 状态 : 某 个 动态 面板 的 状态 。 根 据 动态 面板 的 状态 来 判断 是 否 执行 某 个 用 例 。 

间 针 : 可 以 通过 当前 的 指针 获取 鼠标 的 当前 位 置 ， 实 现 鼠 标 拖 描 的 相关 功能 。 可 以 根据 拖 曙 的 
位 置 来 判断 是 否 要 执行 某 些 操作 。 

元 件 范 围 : 为 元 件 事件 添加 条 件 事件 指定 的 范围 。 

自 适应 视图 : 根据 一 个 元 件 的 所 在 面板 进行 判断 。 

确定 变量 或 元 件 名 称 : 确定 变量 或 元 件 的 名 称 是 根据 前 面 的 选择 方式 来 确定 的 ， 例 如 前 面 选 
择 的 。 
逻辑 判断 值 : 逻辑 判断 值 是 “变量 值 ”选项 ， 确 定 变 量 或 元 件 名 称 就 要 选择 到 底 哪个 是 
OnLoadVariable。 可 以 添加 新 的 变量 ， 如 图 6-23 所 示 。 
逻辑 判断 的 运算 符 : 可 以 选择 等 于 、 大 于 或 小 于 等 条 件 ， 如 图 6-24 所 示 。 要 注意 的 是 “包含 ” 
和 “不 包含 ”选项 ， 也 就 是 可 以 判断 包含 关系 。 

用 来 选择 被 比较 的 值 ， 这 部 分 是 和 “用 来 进行 逻辑 判断 的 值 ” 做 比较 的 那个 值 ， 选 择 的 方式 和 
用 来 进行 逻辑 判断 的 值 一 样 。 例 如 选择 比较 两 个 变量 ， 刚 才 选 择 了 第 1 个 变量 的 名 称 ， 现 在 就 
要 选择 第 2 个 变量 的 名 称 。 

四 ”输入 框 : 如 果 前 面 “ 用 来 选择 被 比较 的 值 ”选择 的 是 “ 值 ”， 就 要 在 输入 框 中 输入 具体 的 值 。 
日 ”逻辑 描述 框 : Axure RP 会 根据 用 户 在 前 面 几 部 分 中 的 输入 ， 生 成 一 段 描述 让 用 户 判 断 条 件 是 否 
是 逻辑 正确 的 。 

@ ”| 国 键 : 可 以 让 用 户 在 输入 值 的 时 候 ， 使 用 一 些 常规 的 函数 ， 如 获取 日 期 、 截 断 和 获取 字符 捉 、 
© 

© 
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预 设置 参数 等 这 部 分 用 得 非常 少 。 


刍 : 新 增 条 件 。 
EE 删除 条 件 。 


添加 用 例 时 ， 打 开 用 例 编辑 器 ， 首 先 选择 要 使 用 的 若干 个 动作 ， 然 后 再 针对 动作 进行 参数 设 定 就 可 以 了 。 


当 需 要 同时 为 多 个 Case 改变 条 件 判断 关系 时 ， 可 以 在 相应 的 Case 名 称 上 单 击 鼠标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 切换 为 <lf> 或 <Else If> 命令 即 可 ， 如 图 6-25 所 示 。 


x 相册 和 EF n 
1 ( 超 形 信 动 


OnLoadVariable 


图 6-22 图 6-23 


一 9 
使 用 表达 式 5 


表达 式 是 由 数字 、 运 算 符 、 数 字 分 组 符号 (括号 )、 变 量 等 组 合成 的 公式 。 在 Axure RP 8.0 中 ， 
表达 式 必须 写 在 四 中 ， 否 则 将 不 能 作为 表达 式 正确 运算 。 


让 到 运算 符 类 型 人 @ 


运算 符 是 用 来 执行 程序 代码 运算 的 。 会 针对 一 个 以 上 操作 数 项 目 来 进行 运算 。Axure RP 8.0 中 一 
共 包 含 了 4 种 运算 符 ， 分 别 是 算术 运算 符 、 关 系 运算 符 、 赋 值 运 算 符 和 逻辑 运算 符 。 


1. 算术 运算 符 


算术 运算 符 就 是 常 说 的 加 减 乘除 符号 ， 符 号 是 + 、 一 、*、/。 例如 a+b、blc 等 。 除了 以 上 4 个 
算术 运算 符 外 ， 还 有 一 个 取 余 数 运算 符 ， 符 号 是 %。 取 余数 是 指 将 前 面 的 数字 中 完整 包含 了 后 面 的 
部 分 去 处 ， 只 保留 剩余 的 部 分 ， 例 如 18/5， 结 果 为 3。 


2. 关系 运算 符 


Axure RP 8.0 中 一 共有 6 种 关系 运算 符 ， 分 别 是 <、<=、>、>=、==、!=。 关 系 运 算 符 对 其 两 
侧 的 表达 式 进行 比较 ， 并 返回 比较 结果 。 比 较 结果 只 有 真 或 假 两 种 ， 也 就 是 True 和 False。 


3. 赋值 运算 符 _ 


Axure RP 8.0 中 的 赋值 运算 符 是 =。 赋 值 运算 符 能 够 将 其 右 侧 的 表达 式 运算 结果 赋值 给 左 侧 一 个 
能 够 被 修改 的 值 ， 例 如 变量 、 元 件 文字 等 。 


Axure RP 8.0 中 的 逻辑 运算 符 有 两 种 , 分 别 是 && 和 || 。&& 表 示 并 且 的 关系 ，|| 表示 或 者 的 关系 。 
逻辑 运算 符 能 够 将 多 个 表达 式 连接 在 一 起 ， 形 成 更 复杂 的 表示 式 。 

在 Axure RP 8.0 中 还 有 一 种 逻辑 运算 符 !， 表 示 不 是 ， 它 能 够 将 表达 式 结果 取 反 。 

例如 ，! (a+b&&=c)， 返 回 的 值 与 a+b&&=c) 的 值 相反 。 

5 守 2 表达 式 的 格式 。”(@ 

a+b、a>b 或 者 a+b&&=c 等 都 是 表达 式 。 在 Axure RP 8.0 中 ， 只 有 在 值 的 编辑 时 才 可 以 使 用 表 
达 式 ， 表 达 式 必须 写 在 [0] 中 。 

下 面 通 过 几 个 例子 加 深 理解 。 

[Inamejl: 这 个 表达 式 没有 运算 符 ， 返 回 值 是 name 的 变量 值 。 

[[18/3j]: 这 个 表达 式 的 结果 是 6。 

[Iname=='admin]j: 当 变量 name 的 值 为 admin' 时 ， 返 回 True， 否 则 返回 False。 

[Inum1+num2]}: 当 两 个 变量 值 为 数字 时 ， 这 个 表达 式 的 返回 值 为 两 个 数字 的 和 。 

如 果 想 将 两 个 表达 式 的 内 容 链 接 在 一 起 或 者 将 表达 式 的 返回 值 与 其 他 文字 链接 在 一 起 时 ， 只 需 
将 它们 写 在 一 起 就 可 以 。 


函数 的 使 用 方法 p 


Axure RP 8.0 中 的 函数 指 的 是 软件 自 带 的 函数 ， 是 一 种 特殊 的 变量 ， 可 以 通过 调用 获得 一 些 特定 
的 值 。 函 数 的 使 用 范围 很 广泛 ， 能 够 让 原型 制作 变 得 更 迅速 、 更 灵活 和 更 逼真 。 在 Axure RP 8.0 中 
只 有 表达 式 中 能 够 使 用 函数 。 


< 
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在 “用 例 编辑 ”对 话 框 中 添加 “设置 变量 值 ”动作 后 ， 
勾 选 OnLoadVariable 复 选 框 ， 单 击 仪 按钮 ， 单 击 “ 插 入 变 
量 或 函数 ”选项 ， 即 可 看 到 Axure RP 自 带 的 函数 ， 如 图 
6-26 所 示 。 

在 该 面板 中 除了 全 局 变量 和 布尔 类 型 的 预算 法 ， 剩 下 
的 就 是 9 种 类 型 的 函数 。 函 数 使 用 的 格式 是 : 对 象 . 函数 名 
(参数 1， 参数 2……)。 


图 6-26 


实例 21 一 制作 锁 屏 界面 © 


因为 用 户 刚刚 接触 函数 ， 
所 以 先 制作 一 个 简单 的 小 实 
例 ,只 用 一 张 图 片 和 一 个 函数 ， 郊外 图 移 
就 可 以 模拟 手机 倘 屏 上 的 时 基 细 用 者 


* 源 文件 ， 素 材 & 源 文件 \ 第 6 章 \ 制 作 锁 屏 界面 .p 
上 操作 视频 : 视频 第 6 章 \ 制 作 锁 屏 界 面 .mp4 


间 。 总 人 
a 忆 a 
’ 
》 ¢ 3 
ID ID 


到 打开 “使 用 函数 设置 时 间 np” 素材 文件 ， 如 图 6-27 所 示 。 使 用 “文本 标签 ”元 件 制作 如 
图 6-28 所 示 的 页 面 效 果 ， 更 改 文 本 标签 内 的 文字 字号 为 72 和 25。 
Esl 
i a nd hd 
$ Ey 
| y Ss i 
En 
图 6-27 | 图 6-28 
三 删除 文本 标签 内 的 数字 ,选中 文本 标签 并 且 从 左 到 右 依次 将 文本 标签 元 件 命名 为 "时 "和 "分 ”， 


如 图 6-29 所 示 。 

王选 择 “ 时 ” 元件， 双击 “属性 ”选项 卡 下 的 “鼠标 单 击 时 ”事件 ， 添 加 “设置 文本 ” 动 
作 ， 勾 选 “ 时 ” 复 选 框 ， 单 击 仪 按钮 ， 如 图 6-30 所 示 。 单 击 " ,插入 变量 或 函数 " 选项 ， 选 择 get 
Hours() 选项 ， 效 果 如 图 6-31 所 示 。 


[各 


第 6 章 变量 、 表 达 式 和 函数 的 使 用 ， 


= ==] 本 ee] 
图 6-30 图 6-31 
于 单 击 “ 确 定 ” 按 钮 ， 获 取 小 es D mE n 
时 函数 。 使 用 相同 的 方法 ， 为 “分 " 1 时 2 分 
元 件 添加 函数 ， 如 图 6-32 所 示 。 a ia 上 | ss 国 
玛 在 工作 区 内 ,文本 标签 如 | ews | na 
6-33 所 示 。 单 击 “ 预 览 ”按钮 ， 个 BEEd 时 上 吧 让 村 从 时 = 
在 浏览 器 中 可 以 查看 添加 函数 的 具体 | “到 汪 ， 人 
效果 ， 如 图 6-34 所 示 。 多 时 3 于 可 [ 认 杜 广 于 分 = 
"TNow getHoursOF “TNow getMinutes( 
更 多 事件 >>> 更 多 事件 >>> 
一 一 ern © J » 
图 6-32 
12:58 13: 32 
a 已 Ee [a 
可 可 
[了 ) ) 
| | Y 3 8 ; 
| . | 
? 1 Er Er 
oa- 一 4 月 21 六 


图 6-34 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


常见 的 函数 p 


除了 变量 和 布尔 类 型 ，Axure RP 8.0 中 按照 功能 的 不 同 将 函数 分 为 9 类， 分 别 是 中 继 器 /数据 集 、 
元 件 、 页 面 、 鼠 标 指针 、 字 符 串 、 数 字 、 数 学 和 日 期 。 接 下 来 逐一 进行 介绍 。 


宇和 中 继 器 / 数据 集 函 数 合 


单 击 “ 用 例 编辑 ”对话 框 右 下 角 的 仪 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 ” 
选项 ， 在 “中 继 器 / 数据 集 ” 选 项 下 是 中 继 器 / 数据 集 函 数 ， 函 数 说 明 如 表 6-1 所 示 。 


表 6-1 
Repeater 获得 当前 项 的 父 中 继 器 
visibleltemCount 返回 当前 页 面 中 所 有 可 见 项 的 数量 
itemCount 当前 过 滤器 中 项 的 数量 
dataCount 当前 过 滤器 中 所 有 项 的 个 数 
pageCount 中 继 器 对 象 中 页 的 数量 
pageindex 中 继 器 对 象 当前 的 页 数 


关于 中 继 器 函数 ， 将 在 本 书 的 第 9 章 中 详细 讲解 ， 读 者 可 参看 相关 章节 ， 此 处 就 不 再 详细 讲解 。 
如 元 件 区 数 全 


单 击 “用 例 编辑 ”对 话 框 右 下 角 的 仪 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 " 
选项 ， 在 “元 件 ” 选 项 下 是 元 件 函 数 ， 函 数 说 明 如 表 6-2 所 示 。 


表 6-2 
况 此 

x 获得 元 件 的 X 坐标 
y 获得 元 件 的 Y 坐标 
this 获得 当前 元 件 
width 获得 元 件 的 宽度 
height 获得 元 件 的 高 度 
scrollX 动态 面板 元 件 在 X 轴 滚 动 的 距离 ， 单 位 : px 
scrollY 动态 面板 元 件 在 Y 轴 滚 动 的 距离 ， 单 位 ，px 
text 元 件 的 文本 值 
name 元 件 的 名 称 
top 获得 元 件 的 Y 坐标 ， 即 顶部 Y 坐标 的 值 
left 获得 元 件 的 X 坐标 ， 即 左 侧 X 坐标 的 值 
right 获得 元 件 右 侧 的 X 坐标 ，right-left= 元 件 的 宽度 
bottom 获得 元 件 底部 的 Y 坐标 ，bottom-top= 元 件 的 高 度 


实例 22 一 制作 查看 商品 大 图 交 末 ”外 


本 实例 将 使 用 “设置 图 片 ”用 例 来 还 原 产品 详情 展示 图 片 的 展示 效果 ， 制 作 过 
程 比较 简单 ， 利 于 用 户 轻松 掌握 元 件 函 数 的 使 用 。 
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玛 新 建 Axure RP 文档 ， 使 用 图 片 元 『 、 源 文件 来 村 8@ 激 六 a 
件 插 入 图 片 ， 将 其 命名 为 Setbigpic， 复 制图 dh nas 机 


* 操 作 视频 : 视频 \ 第 6 章 \ 制 作 查看 商品 大 图 效果 .mp4 
片 并 调整 其 大 小 ,排列 效果 如 图 6-35 所 示 。 pa 
继续 使 用 相同 的 方法 导入 另 一 个 图 片 ， 并 分 
别 将 它们 命名 为 pic1、pic2、pic3 和 pic4， 
如 图 6-36 所 示 。 


ae 


gp i 


) ¥ 


a 


玛 选择 pic1， 双 击 “ 和 鼠标 移入 时 ”选项 ， 在 “用 例 编辑 ”对话 框 中 选择 “设置 图 片 ”动作 ， 
并 勾 选 Setbigpic 元 件 ， 如 图 6-37 所 示 。 


est 
| 
| 
| 
been 
国 片 SR 
== as 
meE 定 作 吧 bd a ”| SA EE 
2 Sma 
~ 让 村 技 下 
村 ~ sss 
xt | 3) 
| aa mn 
= | 门 [sx [可 
| i G 
Wi 四 片 "| SA 三 
[Iw | 可 - 
Ce Cw 
图 6-37 


天 在 Default 下 单价 “导入 " 按钮， 再 次 选择 第 一 张 图 片 导 入 ， 如 图 6-38 所 示 。 设置 完成 后 ， 
单 击 “ 确 定 ” 按 钮 ，“ 检 视 : 图 片 ” 面 板 如 图 6-39 所 示 。 


三 使 用 相同 的 方法 为 pic2 添加 交互 ， 工 作 区 如 图 6-40 所 示 。 制 作 完成 后 预览 效果 如 图 6-41 
所 示 。 


< 
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避 当前 元 件 < Kg 检视 图片 D 
ta 1 pic1 

pic3 (图片 ) 
Et HE 
同 pic4 便 片 ) v5 
多 Setbigpic 图片) Defaukt 为 mage 


= 十 运用 例 
Default 窜 户 标 单 击 时 
图 片 ”| 迪 | SA 清 字 4 嗓 饼 标 移入 时 
EE a 5 
设置 bopc mage to mage 
Ns BX) Ne 顺义 出 时 
鲜 标 按 下 
图 PF > 导入 || 清 = 更 多 事件 =>> ~ 


94 : 
”区 让 
图 6-40 图 6-41 


2 页 面 函 数 @ 


单 击 “ 用 例 编辑 ”对 话 框 右 下 角 的 仪 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 ” 
选项 ， 在“ 页面 ”选项 下 是 页 面 函数 ， 函 数 说 明 如 表 6-3 所 示 。 
表 6-3 


PageName 获得 当前 页 面 的 名 称 


鼠标 指针 函数 一 人 


单 击 “用 例 编辑 ”对 话 框 右 下 角 的 f 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 " 
选项 ， 在 “窗口 ”选项 下 是 窗口 函数 ， 函 数 说 明 如 表 6-4 所 示 。 


表 6-4 


Cursor.x 鼠标 指针 所 在 的 X 坐标 
Cursory | 鼠标 指针 所 在 的 Y 坐标 
DragX 本 次 拖 动 事件 元 件 沿 X 轴 拖 动 的 距离 
DragY 本 次 拖 动 事件 元 件 沿 Y 轴 拖 动 的 距离 
TotalDragX 元 件 沿 X 轴 拖 动 的 总 距离 ( 在 一 次 OnDragStart 和 OnDragDrop 函数 之 间 ) 
TotalDragY 元 件 沿 Y 轴 拖 动 的 总 距离 ( 在 一 次 OnDragStart 和 OnDragDrop 函数 之 间 ) 


实例 23 一 制作 放大 镜 效果 © 
下 面 带领 用 户 使 用 饼 标 指针 函数 ， 模 拟 操作 京东 、 淘 宝 等 大 型 购物 网 站 的 商品 图 片 放大 功能 。 
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加 新 建 Axure RP 文 
档 , 使 用 图 片 元 件 插入 图 片 ， 
调整 其 大 小 ， 并 将 其 命名 为 
“小 图 ”, 如 图 6-42 所 示 。 
将 动态 面板 元 件 拖 入 页 面 
中 ， 将 其 命名 为 “大 图 ”， 效 果 如 医 
所 示 。 


* 源 文件 :素材 & 源 文件 第 6 章 \ 制 作 放 大 镜 效果 .mp 
上 操作 视频 : 视频 \ 第 6 章 \ 制 作 放大 镜 效果 .mp4 


4 EL 
图 6-42 图 6-43 


全 State1 ; 图 片 ， 返 回 index 页 面 ， 再 次 拖 入 一 个 矩形 元 件 ， 将 其 命名 为 
“放大 镜 ”， 修改 填充 频 色 为 浅 绿色 ， 如 图 6-44 所 示 。 


图 6-44 


选择 “小 图 "， 双击 “鼠标 移入 时 ”事件 , 单 击 “显示 /隐藏 " 动作 , 设置 参数 如 图 6-45 所 示 。 
“确定 ”按钮 ， 双 击 “ 鼠 标 移出 时 ”事件 ， 选 中 “显示 / 隐藏 ”动作 ， 设 置 参 数 如 图 6-46 所 示 。 


| me 


图 6-45 图 6-46 
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单 击 工作 区 , 在 “更 多 事件 "下拉 列 表 中 选择 “页 面 鼠 标 移动 时 ”, 双击 “鼠标 移动 时 事件 ”， 
选择 “移动 ”动作 ， 选 择 “ 放 大 镜 ” 复 选 框 ， 选 择 “ 绝 对 位 置 ” ， 继 续 选 择 fx 设置 参数 ， 如 图 6-47 
所 示 。 


es 
在 下 方 人 有 于 括 和 的 朋友 生 月 各 量 生 人 和 呈 闻 母 委 守 不 太吉- 直下 方 旨 所 了 括 Nfdi 有 二 ， 月 至上 天 呈 十 生 。 区 宁 不 六 认 刀 安 相 
as sea 


EE 


图 6-47 


双 设置 完成 后 ， 完 成 效果 如 图 6-48 所 示 。 继 续 选 择 datu 复 选 框 ， 选 择 “ 绝 对 位 置 ”选项 ， 
如 图 6-49 所 示 。 


图 6-48 图 6-49 


五 单 击 X 后 的 多 图 标 ， 设 置 指针 函数 ， 如 图 6-50 所 示 。 采 用 同样 的 方式 ， 设 置 Y 的 值 ， 如 
图 6-51 所 示 。 


医生 
TE A 


| VARLIeR Corvorar 20 


saa 
在下 罚 必 所 于 恬 和 iS 朗 生 ,局 安全 公克 半数 .不 人 尖刀 人 人们 
Rc 


ar = EE -x 


图 6-50 图 6-51 
冰 设置 完成 后 , 单 击 “ 确 
定 ”按钮 ， 返 回 index 页 面 ， 生 
击 “ 预 览 ” 按 钮 ， 在 浏览 器 
预览 效果 ， 如 图 6-52 所 示 。 


证 二 


so ss ma 
6.5.5 EE D 


单 击 “ 用 例 编辑 ”对话 框 右 下 角 的 区 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 ” 
选项 ， 在 “字符 串 ” 选 项 下 是 字符 串 函 数 ， 函 数 说 明 如 表 6-5 所 示 。 
表 6-5 


length 返回 指定 字符 串 的 字符 长 度 


charAt(index) 返回 在 指定 位 置 的 字符 ，index 参数 表示 字符 的 位 置 ， 从 0 开始 

charCodeAtlindex) 返回 在 指定 位 置 字符 的 Unicode 编码 ，index 参数 表示 字符 的 位 置 ， 从 0 开始 
concat('string'’) 连接 两 个 或 多 个 字符 串 ， 参 数 表示 连接 的 字符 串 

某 个 指定 字符 串 在 该 字符 串 中 首次 出 现 的 位 置 ， 值 可 为 0~ 字符 串 长 度 -1， 
searchValue 表示 查找 的 指定 字符 串 

某 个 指定 字符 串 在 该 字符 串 中 最 后 一 次 出 现 的 位 置 ， 值 可 为 0~ 字符 串 长 度 -1， 
searchValue 表示 查找 的 指定 字符 串 


indexOf('searchValue') 


lastiIndexOf('searchValue') 


replace('searchvalue'， 将 字符 串 中 的 某 个 字符 串 替 换 为 另外 的 字符 串 。 其 中 , searchvalue 表示 被 替换 的 字符 串 ， 
'newvalue') newvalue 表示 替换 成 的 字符 串 
Slice(str, end) 提取 字符 串 的 片段 ， 并 返回 被 提取 的 部 分 


将 字符 串 按照 一 定 规则 分 隔 成 字符 串 组 ， 数 组 的 各 个 元 素 以 "" 分 隔 。 其 中 ，separator 
参数 表示 用 于 分 隔 的 字符 串 ，limit 表示 数组 的 最 大 长 度 
字符 串 截 取 函 数 ， 从 start 位 置 提取 length 长 度 的 字符 串 。 当 从 第 一 个 字符 截取 时 ， 


split(separator, limit) 


substr(start, length) 


start 的 值 等 于 0 
字符 串 截取 函数 , 截取 字符 串 从 from 位 置 到 to 位 置 的 子 字符 串 , 当 从 第 一 个 字符 截取 时 ， 
substring(from, to) 
from 等 于 0 
toLowerCasel) 将 字符 串 的 全 部 字符 都 转换 为 小 写 
toUpperCasel) 将 字符 串 的 全 部 字符 都 转换 为 大 写 
trim 删除 字符 串 的 首尾 空格 
toString() 转换 为 字符 串 并 返回 


3 数字 函数 (Number)” 人 @ 


单 击 “用 例 编辑 ”对 话 框 右 下 角 的 仪 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 " 
选项 ， 在 Number 选项 下 是 数字 函数 ， 函 数 说 明 如 表 6-6 所 示 。 


表 6-6 


toExponential(decimalPoints) | 把 值 转换 为 指数 计数 法 
toFixed(decimalPoints) 将 数字 转换 为 小 数 点 后 有 指定 位 数 的 字符 串 ，decimalPoints 参数 表示 小 数 点 的 位 数 


toPrecision(length) 将 数字 格式 化 为 指定 的 长 度 ，length 参数 表示 长 度 


单 击 “ 用 例 编辑 ”对话 框 右 下 角 的 仪 按钮 ， 进 入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 " 
选项 ， 在 “数学 ”选项 下 是 数学 函数 ， 函 数 说 明 如 表 6-7 所 示 。 


表 6-7 


加 ， 返 回 前 后 两 个 数 的 和 
减 ， 返 回 前 后 两 个 数 的 差 
乘 ， 返回 前 后 两 个 数 的 乘积 
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( 续 表 ) 

函数 名 称 | 说 明 
由 除 ， 返 回 前 后 两 个 数 的 商 
% 余 ， 返 回 前 后 两 个 数 的 余数 
abs(x) 返回 X 的 绝对 值 
acos(x) 返回 X 的 反 余 弦 值 
asin(x) 返回 X 的 反正 弦 值 
atan(x) 返回 X 的 反正 切 值 
atan2(x,y) 返回 从 X 轴 到 (X,Y) 的 角度 
ceil(x) 对 X 进 行 上 舍 入 操作 
cos(x) 返回 X 的 余弦 值 
exp(x) 返回 X 的 e 指数 值 
floor(x) 对 X 进 行 下 舍 入 操作 
log(x) 返回 X 的 自然 对 数 
max(x,y) 返回 X 和 YY 两 个 数 的 最 大 值 
min(x,y) 返回 X 和 Y 两 个 数 的 最 小 值 
pow(x,y) 返回 X 的 Y 次 晨 
random!() 到 1 的 随机 数 
Sin(x) 的 正弦 值 
sqrt(x) 的 平方 根 
tan(x) 返回 X 的 正切 值 


实例 24 一 制作 商品 结算 按钮 © 


在 使 用 Axure RP 交互 设 
计时 ， 函 数 可 以 用 在 条 件 公 
式 和 需要 赋值 的 地 方 ， 其 
基本 语法 是 用 双方 括号 包 
含 ， 变 量 值 和 函数 用 英文 
句号 连接 。 

到 新 建 一 个 Axure RP 文档 。 使 用 “ 矩 
形 3” 元 件 和 文本 标签 元 件 完成 页 面 的 制作 ， 
如 图 6-53 所 示 。 继 续 使 用 主要 按钮 元 件 完 
成 页 面 的 制作 ， 如 图 6-54 所 示 。 


> 源 文 件 ， 素 材 & 源 文件 第 6 章 \ 制 作 商 品 结算 按钮 .rp 
操作 视频 ， 视频 第 6 章 制 作 商 品 结算 按钮 .mp4 
商品 名 称 ; 春 夏 时 尚 休 闲 小 包 
店铺 满 减 优惠 卷 : 满 100 减 5 元 
数量 13 半 55 


图 6-53 图 6-54 


到 使 用 文本 标签 元 件 和 文本 框 元 件 在 工作 区 添加 控件 , 如 图 6-55 所 示 。 文本 框 元 件 命名 为 “ 数 
量 ”， 红 色 的 数字 文本 标签 元 件 命名 为 “单价 ”， 如 图 6-56 所 示 。 


[A&E 


- 袜 昌 文 4 杠 GB" A n 
数量 单价 
二 = = 
AR 站 章 Fa a | 
二 2 全 本 办 
一 
图 6-55 图 6-56 
天使 re i 加 控件 , 如 图 6-57 所 示 。 文本 框 元 件 命名 为 “总 
金额 ”， 按 钮 元 件 命名 为 “结算 ”， 如 图 6-58 所 示 。 
商品 名 称 : 春 夏 时 尚 休闲 小 包 aa 
店铺 满 成 优惠 卷 满 100 减 5 元 EE 
na ¥55 ”| 放 | 
图 6-57 图 6-58 
王选 中 “结算 ”按钮 元 件 ， 双 击 “ 鼠 标 单 击 时 ”添加 用 例 。 在 该 对 话 框 中 ， 添 加 动作 “设置 


变量 值 ”后 ， 单 击 “ 添 加 全 局 变量 ”按钮 ， 新 添加 a 和 b 两 个 变量 ， 如 图 6-59 所 示 。 


EE i 

人 如 果 生 IE 浏 鉴 狗 刘 洛 原型 准 荐 使 
用 25 个 或 岗 少 的 受 量 。 

坟 量 名 了 地 生 黎 地 ， 少 于 25 人 地 符 ,并 且 不 能 包公。 


图 6-59 


了 单 击 "确定 "按钮 ， 勾 选 3 复 选 框 ， 设 置 全 局 变量 为 元 件 文字 、 数 量 ， 如 图 6-60 所 示 。 继 


续 勾 选 b 复 选 框 ， 设置 全 局 变量 值 为 55， 如 图 6-61 所 示 。 


图 6-61 
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大 添加 “设置 文本 "动作, 勾 选 “ 总 金额 " 复 选 框 , 单 击 对 话 框 右 下 角 的 仪 按钮 , 单 击 "编辑 文本 ” 
对 话 框 中 的 “插入 变量 或 函数 ”选项 ， 插入 如 图 6- 62 所 示 的 变量 。 


¥[fa*b]] 
I 名 3 


| 一 
用 -- Cm wm 


图 6-62 


到) 单 击 “ 确 定 ” 按 钮 ，“ 检 视 : 矩形 ”面板 如 图 6-63 所 示 。 单 击 预览 按钮 ， 在 浏览 器 中 填写 
数量 ， 单 击 “ 结 算 ” 按 钮 预览 效果 ， 如 图 6-64 所 示 。 


1 结算 商品 名 称 : 春 夏 时 尚 休闲 小 包 
a “ 国 汪 |] 3 店铺 满 减 优惠 卷 满 100 减 5 元 
4 办 页 标 单 击 时 数量 15| ¥ 55 


4 Case1 
多 设置 全 于，- 文 了 于 数 呈 
and 
值 于 b" "55” 
多 ix 了 于 二 2 硒 = 
“wa 


了 委 村 黎 入 时 
寡妇 村 移出 时 


更 多 事件 > -|- 


图 6-63 图 6-64 


单 击 “ 用 例 编辑 ”对 话 框 右 下 角 的 仪 按 钮 进入 “编辑 文本 ”对 话 框 ， 单 击 “ 插 入 变量 和 函数 ” 
选项 ， 在 “日 期 ”选项 下 是 日 期 函数 ， 函 数 说 明 如 表 6-8 所 示 。 


表 6-8 


返回 计算 机 系统 当前 设 定 的 日 期 和 时 间 值 
GenDate 获得 生成 Axure 原型 的 日 期 和 时 间 值 
getDatel) 返回 Date 对 象 属于 哪 一 天 的 值 ， 可 取 值 1~31 
getDay() 返回 Date 对 象 为 一 周 中 的 哪 一 天 ， 可 取 值 0~6， 周 日 的 值 为 0 
getDayOfWeek() 返回 Date 对 象 为 一 周 中 的 哪 一 天 ， 表 示 为 该 天 的 英文 表示 ， 如 周 六 表示 为 Saturday 
getFullYear() 获得 日 期 对 象 的 4 位 年 份 值 ， 如 2015 
getHours() 获得 日 期 对 象 的 小 时 值 ， 可 取 值 0~23 
getMilliseconds() 获得 日 期 对 象 的 毫秒 值 
getMinutes() 获得 日 期 对 象 的 分 钟 值 ， 可 取 值 0~59 
getMonth() 获得 日 期 对 象 的 月 份 值 
getMonthName() 获得 日 期 对 象 的 月 份 的 名 称 ， 根 据 当前 系统 时 间 关联 区 域 的 不 同 ， 会 显示 不 
getSeconds() 获得 日 期 对 象 的 秒 值 ， 可 取 值 0~59 


138/ 


on 


( 续 表 ) 


今 为 止 的 毫秒 数 


getTimel() 获得 1970 年 1 月 1 日 迄 

getTimezoneOffset() 返回 本 地 时 间 与 格林 威 治标 准时 间 (GMT) 的 分 钟 值 

getUTCDate!() 根据 世界 标准 时 间 ， 返 回 Date 对 象 属于 哪 一 天 的 值 ， 可 取 值 1~31 
getUTCDay!() 根据 世界 标准 时 间 ， 返 回 Date 对 象 为 一 周 中 的 哪 一 天 ， 可 取 值 0~6， 周 日 的 值 为 0 
getUTCFullYear() 根据 世界 标准 时 间 ， 获 得 日 期 对 象 的 4 位 年 份 值 ， 如 2015 
getUTCHours() 根据 世界 标准 时 间 ， 获 得 日 期 对 象 的 小 时 值 ， 可 取 值 0~23 
getUTCMilliseconds() 根据 世界 标准 时 间 ， 获 得 日 期 对 象 的 毫秒 值 

getUTCMinutes() 根据 世界 标准 时 间 ， 获 得 日 期 对 象 的 分 钟 值 ， 可 取 值 0~59 
getUTCMonth() 根据 世界 标准 时 间 ， 获 得 日 期 对 象 的 月 份 值 

getUTCSeconds() 根据 世界 标准 时 间 ， 获 得 日 期 对 象 的 秒 值 ， 可 取 值 0~59 
parse(datestring) 格式 化 日 期 返回 日 期 字符 串 相对 1970 年 1 月 1 日 的 毫秒 数 
toDateString() 将 Date 对 象 转换 为 字符 串 

tolSOString() 返回 ISO 格式 的 日 期 

toJSON() 将 日 期 对 象 进行 JSON(JavaScript Object Notation) 序列 化 
toLocaleDateString() 根据 本 地 日 期 格式 ， 将 Date 对 象 转换 为 日 期 字符 串 


toLocaleTimeString() 
toLocaleString() 


toTi 
toU 


UTC(year,month,day,hour, 


min 


valueOf() 
addYears(years) 


add 
add 
add 
add 
add 


addMillisecondstms) 


meString() 
TCString() 


utes sec, millisec) 


Months(months) 
Days(days) 
Hous(hours) 
Minutes(minutes) 
Seconds(seconds) 


根据 本 地 时 间 格 式 ， 将 Date 对 象 转 换 为 时 间 字符 串 

根据 本 地 日 期 时 间 格 式 ， 将 Date 对 象 转换 为 日 期 时 间 字 符 串 
将 日 期 对 象 的 时 间 部 分 转换 为 字符 串 

根据 世界 标准 时 间 ， 将 Date 对 象 转 换 为 字符 串 

生成 指定 年 、 月 、 日 、 小 时 、 分 钟 、 秒 和 毫秒 的 世界 标准 时 间 对 象 ， 返 回 该 时 间 相对 
1970 年 1 月 1 日 的 毫秒 数 

返回 Date 对 象 的 原始 值 

将 某 个 Date 对 象 加 上 若干 年 份 值 ， 生 成 一 个 新 的 Date 对 象 
将 某 个 Date 对 象 加 上 若干 月 值 ， 生 成 一 个 新 的 Date 对 象 
将 某 个 Date 对 象 加 上 若干 天 数 ， 生 成 一 个 新 的 Date 对 象 
将 某 个 Date 对 象 加 上 若干 小 时 数 ， 生 成 一 个 新 的 Date 对 象 
将 某 个 Date 对 象 加 上 若干 分 钟 数 ， 生 成 一 个 新 的 Date 对 象 
将 某 个 Date 对 象 加 上 若干 秒 数 ， 生 成 一 个 新 的 Date 对 象 
将 某 个 Date 对 象 加 上 若干 毫秒 数 ， 生 成 一 个 新 的 Date 


实例 25 一 制作 查看 实时 日 期 效果 ”个 


简 说 


日 期 函数 让 


接 下 来 制作 一 个 非常 
又 实用 的 实例 ， 使 用 
原型 设计 根 


据 计 算 机 系统 设 定 的 日 


期 和 时 间 返 


回 


当前 的 日 


期 条 


Bi» 
2 


时 间 。 


加 新 建 Axure RP 文档 ， 将 “二 级 标 
元 件 拖 入 页 面 中 ， 修 改 文 本 内 容 ， 如 


图 


条 


6-65 所 示 。 分 别 将 两 个 元 件 命名 为 "日 期 ” 
“时 间 ”， 如 图 6-66 所 示 。 


* 源 文件 ， 素材 & 源 文件 \ 第 6 章 \ 制 作 查看 实时 日 期 效果 .rp 
“操作 视频 : 视频 \ 第 6 章 \ 制 作 查看 实时 日 期 效果 .mp4 


2018 年 04 月 12 日 
10:23:55 
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检视 -矩形 Dn" 检 禹 : 拒 形 口 
日 期 时 间 
| = 
v 交互 van Ee| 
十 适用 例 = 创建 入 这 lL 十 涝 加 用 全 创建 连接 | 
嗓 包 标 单 去 时 嗓 和 标 单 去 时 
2016 年 10 月 11 日 中 BGA 人 
有 记 标 移出 时 办 入 标 克 出 时 
22:21:44 Nm I Be 
文本 适 侍 文本 年 接 
5 下 了， ‘Ee 而 
图 6-65 图 6-66 


三 选中 两 个 元 件 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 动态 面板 ”命令 ， 转 换 


效果 如 图 6-67 所 示 。 将 动态 面板 命名 为 “动态 时 间 ”， 如 图 6-68 所 示 。 


a 0 月 11 日 


9 
,22:21:44, 
图 6-67 图 6-68 


了 在 “概要 : 页 面 " 面板 中 State1 项 目 上 单 击 和 鼠标 右键 ， 在 弹 H 


的 快捷 菜单 中 选择 “复制 


状态 ”命令 ， 复 制 效果 如 图 6-69 所 示 。 双 击 “ 属 性 ”选项 卡 下 的 “ 载 入 时 ”事件 ， 添 加 “设置 


面板 状态 ”动作 ， 选 择 状态 为 Next， 勾 选 “ 向 后 循环 ” 复 选 框 ，“ 循 环 间隔 ”设置 为 1000 毫秒 ， 
如 图 6-70 所 示 。 
"ET | 
用 呈 碾 称 caso1 内 10 条 个 
hah 组 过 动作 配音 动作 
4 到 法 了 二 14 到 cese1 运 笑 轩 兴 轨 杖 下拉 动态 冯 而 
pi ee 三 二 hott 人 
Emer [7 Set 动 杞 时 间 ( 动 志 惠 慨 ) state to Next wrap 伞 环 同 后 1000 
生动 下 元件 -各 惑 二 、 
EE a 
ze 
wx 大 要 页面 FQ ee ] 
sn 
D ndex Ba De | 
4 生动 态 对 间 (动态 硬 板 ) 回 Re ee [Met 
4 wm Statel SE 同 直 后 短 环 
A 时 间 ER ES 辐 乔 环 同 也 |1000 室 秒 
AA 昌 BOE) Wh 同 兰 个 状 赤 迁 时 1000 计 外 乓 切 搞 
4 四 State2 a 地 和 3 本 | 无 7 ls00 对 
和 A 对 间 [ER) 称 直 Eo 无 时 间 |500 。 诗 炒 
A 日 期 6 更 2 0 
ER 下 
RR a 
Cm 邓 
图 6-69 图 6-70 


OE 


名 单 击 “ 确 定 ”按钮 ， 双 击 “ 状 态 改变 时 ”事件 ， 添 加 “设置 文本 ”动作 ， 义 选 两 个 “日 期 " 
复 选 框 ， 如 图 6-71 所 示 。 单 击 仪 按钮， 在 “编辑 文本 ”对 话 框 中 插入 函数 ， 如 图 6-72 所 示 。 


HT 


em | se — Te 区 于 | 
Cs 在 下 六 六 区 绽 文本. 玉 旦 称 碟 到 区 要 在 TT 二， 如 0 ; 插入 可 旺 EOnLcadyariebleli5 民 信 志 对 OnLcadyarble 罗 | 
ea rar 和 A+ yyrBp 征 3 VarA+ Var5 区 和 ; 括 入 P20eNennel 这 同人 加. 
re Fess se ws se 
mr Er || vow SeruivearOD FIO conca Now eeMerihO) cuberri(h concaidNow geronehDil engen2.2]1 
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Besa 
到 下 万 建司 项 和 hg 后 可 至 ,与 有 交 量 名 称 必 从 时 字母 、 歼 字 , 不 多 开 包 全 到 三 , 
Susiza 


图 6-71 图 6-72 


concat( 这 个 函数 是 在 字符 串 后 面 附加 字符 串 ， 主 要 是 在 月 、 日 、 时 、 分 、 秘 之 前 加 上 0。substr0 这 个 函数 是 从 
字符 串 的 指定 位 置 开 始 ， 截 去 固定 长 度 的 字符 串 ， 起 始 位 置 从 0 开始 ; length 的 主要 功能 是 取得 目标 字符 串 的 长 度 。 


三 单 击 "确定 " 人 勾 选 两 个 “时 间 ” 复 选 框 ， 在 “编辑 文本 ”对 话 框 中 插入 如 图 6-73 所 
示 的 函数 。 单 击 “ 确 定 ”按钮 ，" 用 例 编辑 ”对 话 框 如 图 6-74 所 示 。 


EE ee wr le 


| 在 下 方 蝙 名 区 壕 入 文本 , 变量 名 称 或 表达 式 要 写 在 [JT 中。 例如 ; 插入 变量 OnLoadVariablejj 返 回 值 为 变量 "OnLoadVariable" 的 | 
| 当前 值 ; A re od 插入 UPageName] 返回 值 为 当前 页 面 名 称 . 


适 入 亦 呈 到 基数 _ 


[[Now.getHoursOJ}:[[Now.getMinutesO]}:[[(0.concat(Now.getSeconds0)).substr((0.concat(Now.getSeconds 
Oength-2,2)] 


图 6-74 
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了 单 击 “ 确 定 ” 按 钮 页面 效果 如 图 6-75 所 示 。 单 击 工具 栏 上 的 “预览 ”按钮 ， 页 面 预览 效 
果 如 图 6-76 所 示 。 


2016 年 和 月 1TE 
3 
We 22:21:44 
图 6-75 图 6-76 


| 当知 识 点 讲解: 日 期 函数 
| 日 期 的 获取 和 连接 并 不 困难 ， 这 里 的 难点 是 如 何 将 1 位 文字 转换 为 2 位 文字 ， 上 一 步 提 到 的 | 
| 函数 是 关键 。 以 秒 为 例 ， 先 在 获取 到 的 秒 前 面 加 0， 比如 ，010、05。 最 后 要 保留 的 是 两 位 数 ， 其 ， 
| 实 就 是 最 后 两 位 数 ， 但 是 Axure RP 中 没有 Rightl 函数 ， 所 以 只 能 迁 回 取得 。 
| ”外 获取 添加 0 后 的 长 度 。 | 
| @ 用 长 度 减 去 2， 作 为 截取 字符 串 的 起 始 位 置 。 
| 图 截取 的 长 度 为 2。 | 
| 例如: 010， 从 字符 串 下 标 为 1 的 位 置 开 始 ， 取 两 位 ， 结 果 为 10;， 05， 从 字符 串 下 标 为 0 的 | 

位 置 开始 ， 取 两 位 ， 结 果 为 05。 这 就 是 需要 的 效果 。 
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1 
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的 = 人 动态 面板 元 件 的 使 用 p 


熟悉 动态 面板 元 件 D 


动态 面板 元 件 是 Axure RP 中 功能 最 强大 的 元 件 ， 是 一 个 化 腐朽 为 神奇 的 元 件 。 通 过 这 种 元 件 ， 
客户 可 以 实现 很 多 其 他 原型 软件 不 能 实现 的 动态 效果 。 动 态 面板 可 以 被 简单 地 看 作 拥有 很 多 种 不 同 


状态 的 一 个 超级 元 件 。 选 中 动态 面板 元 件 ， 将 其 拖 入 页 面 中 ， 效 果 如 图 7-1 所 示 。 

双击 动态 面板 元 件 ， 弹 出 “面板 状态 管理 ”对 话 框 ， 如 图 7-2 所 示 。 用 户 可 以 在 该 对 话 框 中 为 
动态 面板 添加 不 同 的 状态 。 

[CE [2 
元 性 库 a ra 1 
H1 H2 H3 Ee ~ 
内 联 框 染 中 起 器 二 党 i 确定 取 满 
图 7-1 图 7-2 

自 动态 面板 名 称 : es 定名 称 。 
自 添加 + : 单 击 该 按钮 ， 可 以 添加 状态 。 
加 复制 由: 单 击 该 按钮 ， 忆 ee 
名 上 移 /下 移 + +: 单 击 该 按钮 ， 可 以 调整 状态 的 顺序 。 
加 编辑 状态 : 单 击 该 按钮 ， 将 进入 当前 状态 的 编辑 状态 。 
自 编辑 全 部 状态 w : 单 击 该 按钮 ， 将 进入 所 有 状态 的 编辑 状态 。 
自 移 除 状态 x : 单 击 该 按钮 ， 将 删除 当前 所 选 状态 。 


-个 动态 面板 通常 由 多 个 面板 组 成 。 为 了 便于 查找 使 用 ， 对 于 每 一 个 面板 都 要 重新 指定 名 称 ， 尽 量 不 要 使 用 默 
| 认 的 名 称 
\ ) 
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实例 26 一 一 添加 动态 面板 


在 Axure RP 8.0 中 动态 面板 是 重 》 源 文件 : 无 
要 的 元 件 之 一 。 使 用 动态 面板 可 以 完 操作 视频 :视频 第 7 章 \ 添 加 动态 面板 .mp4 
成 大 部 分 的 网 页 交互 效果 ， 让 用 户 实 
现 高 级 的 交互 功能 ， 实 现 原型 的 高 保 1 i 了 
真 度 。 动 态 面板 包含 有 多 个 状态 ， 每 | | 
个 状态 可 包含 一 系列 控件 。 | 1 
让- 一 Ee] 


到 将 动态 面板 元 件 从 “元 件 库 ” 面 板 拖 入 页 面 中 ， 如 图 7-3 所 示 。 
玛 双击 动态 面板 元 件 ， 弹 出 “面板 状态 管理 ”对 话 框 ， 为 其 指定 名 称 为 “创建 动态 面板 ”， 

如 图 7-4 所 示 。 单 击 “ 添 加 ”按钮 ， 添 加 两 个 面板 ， 并 分 别 修改 其 名 称 ， 如 图 7-5 所 示 。 
ress EY rma 


国王 站 亚 
[Har mw * 


| 


L ER ER | | Ca | sx | Cna jm | 
图 7-3 图 7-4 图 7-5 
天 单 击 “ 编 辑 全 部 状态 ”按钮 ， 可 以 看 到 同时 打开 4 个 页 面 ， 即 3 个 状态 页 和 一 个 index 页 ， 
如 图 7-6 所 示 。 用 户 可 以 分 别 在 不 同 的 状态 页 中 进行 编辑 操作 。 操 作 完成 后 保存 页 面 ， 可 返回 ndex 
页 面 ， 添 加 交互 效果 。 
创建 动态 画板 /绿色 页面 (index) x ”创建 浪 太 面板 / 茎 色 页 面 (ndex) 创建 动态 面板 /红色 页 面 (index) * index 


400 500 800 700 


图 7-6 


芭 一 个 动态 面板 中 可 以 包含 若干 个 不 同 的 页 面 。 用 户 可 以 通过 在 “检视 :面板 状态 ”面板 中 
添加 交互 ， 实 现 丰 富 的 页 面 效 果 ， 如 图 7-7 所 示 。 


动态 面板 在 Axure RP 元 件 库 中 属于 比较 特殊 的 一 个 元 件 ， 这 个 元 件 看 似 简 
单 ,但 实际 上 拥有 非常 复杂 的 功能 , 是 原型 设计 中 制作 交互 效果 的 重要 元 件 之 一 。 


实例 27 一 一 制作 导航 选中 效果 


动态 面板 是 唯一 可 以 使 用 “加 tws 
" 拖 动 ”事件 的 元 件 。 用 户 可 : 
以 设置 动 开始 时 、 拖 动 时 、 二 
拖 动 结束 时 、 向 左 / 向 右 拖 动 图 暇 让 各 
结束 时 的 交互 效果 。 

加 新 建 一 个 Axure RP 文件 。 将 动态 面 
板 元 件 拖 入 页 面 中 ， 效 果 如 图 7-8 所 示 。 双 击 
动态 面板 元 件 ， 在 弹出 的 “面板 状态 管理 ”对 
话 框 中 新 建 两 个 状态 ， 如 图 7-9 所 示 。 


me . 

9 

| 
图 7-8 


© 


> 源 文件 ， 素材 & 源 文件 \ 第 7 章 \ 制 作 导航 选中 效果 .rp 
* 操作 视频 : 视频 \ 第 7 章 \ 制 作 导航 选中 效果 .mp4 


活动 入 口 


(BS) se 
图 7-9 


砚 选择 “活动 入口” 状态 ， 单 击 “ 编 辑 状态 ”按钮 ， 使 用 “和 矩形 工具 ”制作 如 图 7-10 所 示 的 


页 面 。 使 用 “文本 标签 " 


完成 如 图 7-11 所 示 的 页 面 。 


天 使 用 相同 方法 进入 “公司 首页 ”状态 ， 编 辑 页 面 效 果 ， 返 回 index 页 面 ， 添 加 内 容 ， 如 


到 


列 


7-17 所 示 。 


图 7-12 所 示 。 将 热 区 元 件 拖 入 页 面 中 ， 并 调整 其 大 小 和 位 置 ， 如 图 7-13 所 示 。 
总 选中 热 区, 双击 “检测 : 热 区 " 面板 “属性 " 选项 卡 下 的 “鼠标 单 击 时 ”按钮 , 如 图 7-14 所 示 。 
在 弹出 的 “用 例 编辑 < 鼠标 单 击 时 > ”对话 框 中 选择 “设置 面板 状态 ”动作 ， 如 图 7-15 所 示 。 

码 匀 选 “配置 动作 ”下 的 “使 用 动态 面板 ” 复 选 框 ， 设 置 “选择 状态 ”为 “活动 入 口 ”， 如 
7-16 所 示 ， 单 击 “ 确 定 ”按钮 ， 完 成 设置 。 使 用 相同 的 方法 ， 为 “公司 首页 ”状态 添加 动作 ， 如 


Ka 
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rs 


三 将 文件 保存 ， 单 击 


“预览 ”按钮 ， 原 型 预览 效果 如 医 


7-18 所 示 。 


A 


图 7-18 


在 使 用 动态 面板 制作 页 面 时 ， 为 了 避免 多 个 页 面 中 元 素 位 置 无 法 对 齐 的 情况 ， 可 以 使 用 准确 的 坐标 帮助 定位 。 


Ce em &] 以 
实例 28 一 制作 轮 播 图 效果 @ 


动态 面板 的 应 用 非常 灵活 ， * 源 文件 素材 & 源 文件 第 7 章 \ 制 作 轮 播 图 效果 p 
制作 的 效果 也 是 千变万化 ， 接 下 > 操作 视频 ， 视 频 ' 第 7 章 \ 制 作 轮 播 图 效果 mp4 
来 继续 通过 一 个 操作 实例 来 深层 -大 - 

次 理解 动态 面板 的 使 用 技巧 。 


到 新 建 一 个 Axure RP 文件 。 将 动态 面板 元 件 拖 入 页 面 中 ， 设 置 元 件 的 坐标 为 X:236,Y:160， 尺 


寸 为 W:1920,H:1200， 重 命名 为 “ 轮 播 图 ” ， 如 图 7-19 所 示 。 效 果 如 图 


7-20 所 示 。 


检视 : 动 帮 面 概 D de 大 要 本 要 
轮 播 图 上 
= | 
人 村 ,Rd 全 意 门 广 
State1 
菁 录 新 色 日 > 
§ 
pt | 入 
图 7-19 图 7-20 
静 双击 打开 “面板 状态 管理 ”对 话 框 ， 如 图 7-21 所 示 。 单 击 “添加 ”按钮 ， 添 加 4 个 状态 ， 
并 分 别 重 命名 ， 如 图 7-22 所 示 。 
静 双击 “State 1" ,进入 State 1 编辑 页 面 , 将 图 片 元 件 从 元 件 库 中 拖 入 页 面 中 , 并 调整 大 小 位 置 ， 
如 图 7-23 所 示 。 双 击 图 片 元 件 ， 导 入 外 部 图 片 素材 ， 如 图 7-24 所 示 。 
到 使 用 相同 的 方法 为 其 他 4 个 页 面 导 入 图 片 素材 ，“ 概 要 ， 页面” 面板 效果 如 图 7-25 所 示 。 
返回 index 页 面 ， 分 别 拖 入 5 张 图 片 并 排列 ， 如 图 7-26 所 示 。 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 


[ee 一 一 图 吾 E 状 志 知 过 | 
动态 面板 名 称 -| 闫 誉 加 
画 经 居 志 

十 国 Sw 
State1 


轮 氮 图 1 State1 (index) ndex 
oo 


图 7-23 


拓 要 :页面 FQ 
D index 
4 各 抒 渴 图 (动态 面板 ) 回 
4 本 State1 
| ( 匡 片 ) 
4 四 State2 
责 十 片 ) 
4 四 State3 
pl ( 国 片 ) 
4 = State4 
了 全 片 ) 
4 四 State5 
有 | (图 片 ) 


图 7-25 


可 以 通过 拖 动 的 方式 ,调整 “概要 : 页 面 ”面板 上 页 面 的 顺序 。 此 顺序 将 影响 轮 播 图 的 播放 顺序 。 


码 分 别 将 小 图 命名 为 1~5， 如 图 7-27 所 示 。 选 中 “图 片 1” 元件， 双击 交互 事件 中 的 “鼠标 
移入 时 ”事件 ， 打 开 “ 用 例 编辑 < 鼠标 移入 时 >” 对 话 框 ， 在 对 话 框 中 添加 “设置 面板 状态 ”动作 ， 
如 图 7-28 所 示 。 

斑 选中 “图片 2” 元件， 双击 “鼠标 移入 时 ”事件 ， 在 打开 的 “用 例 编辑 < 鼠标 移入 时 >” 对 
话 框 中 添加 如 图 7-29 所 示 的 动作 。 设 置 “进入 动画 ”和 “退出 动画 ”效果 为 “逐渐 ”， 时 间 为 500 
毫秒 ， 如 图 7-30 所 示 。 


检视 :图片 
1 
EE 
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十 运 加 用 例 ~ 创 晤 法 接 


加 使 用 相同 的 方法 将 “图 片 3~ 5" 元 件 也 添加 相 


预览 项 目 ， 在 浏览 器 中 图 片 可 以 进行 切换 ， 如 图 7-32 所 示 。 
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图 7-29 


图 7-30 


同 的 事件 , 如 图 7-31 所 示 。 执行 “预览 ”命令 


Mm, 


添加 了 进入 动画 和 退出 动画 的 动作 , 交互 效果 更 加 自然 ,效果 看 起 来 也 更 丰富 。 用 户 也 可 以 勾 选 “推动 /拉动 元 件 ” 
复 选 框 ， 获 得 更 丰富 的 效果 。 


站 太 


UN 


除了 采用 


态 面板 元 件 ， 更 


从 元 件 库 中 拖 入 的 方式 创建 动态 面板 元 件 外 ， 用 户 可 以 将 页 
加 方便 用 户 制作 符合 自己 要 求 的 产品 原型 


的 任 一 对 象 转换 为 动 
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选中 想 要 转换 为 动态 面板 的 元 件 ， 单 击 鼠标 右键 ， 


在 弹出 的 快捷 菜单 中 选择 “转换 为 动态 面板 ” 


命令 ， 即 


可 将 其 转换 为 动态 面板 元 件 ， 妇 
从 “元 件 库 ”面板 中 拖 蝶 包 


图 7-33 所 示 。 
建 的 动态 面板 元 件 ， 是 


先 创建 元 件 再 编辑 内 容 。 而 前 


所 讲 的 方法 是 先 创建 内 


容 ， 然 后 再 通过 选择 相应 命令 转换 为 动态 面板 元 件 。 这 
两 种 方法 没有 什么 实质 区 别 。 


隐藏 元 件 ， 元 件 显示 为 淡 黄色 遮 单 。 动 态 面板 则 显示 为 浅 蓝 色 。 页 面 中 的 母 版 实例 显示 为 淡 红色 。 用 户 可 以 通 


过 执行 “视图 ”>“ 遮 单 ”下 的 命令 ， 


选择 是 否 使 用 特殊 颜色 显示 对 象 。 


实例 29 一 登录 页 面 切换 © 


本 实例 模 
拟 网 页 版 淘宝 
登录 界面 ， 在 
制作 过 程 中 使 
用 户 可 以 充分 
地 了 解 和 熟练 动态 面板 元 件 的 
操作 方法 。 

贡 在 工作 区 添加 动态 面 
板 元 件 ， 设 置 参数 如 图 7-34 
所 示 。 双 击 动态 面板 元 件 ， 弹 
出 “面板 状态 管理 ”对 话 框 ， 
添加 “State2”， 为 动态 面板 


* 源 文件 : 素材 & 源 文件 \ 第 7 章 \ 登 录 页 面 切换 .rp 
操作 视频 . 视频 \ 第 7 章 \ 登 录 页 面 切换 .mp4 


从 账 S 到 到 登 录 
国 虚 加 
[bc 直 
回 ! 
手机 扫 码 安全 登录 

使 用 手机 淘 主 阿里 搓 包 扫 搞 二 维 码 


快速 王 录 SSE 
B 
忘 i 权 码 ? 立即 注册 


设置 名 称 ， 如 图 7-35 所 示 。 


> 
en 


| 


图 7-34 


观 双击 “State1” 选项， 进入 面板 编辑 状态 ， 使 


[| 


i 
图 7-35 


用 “矩形 1” 元 件 、 图 片 元 件 和 文本 标签 元 件 


完成 页 面 制作 ， 如 图 7-36 所 示 。 设置 完成 后 ,返回 到 index 页 面 ,在 “检视 : 动态 面板 ”中 你 选 “ 自 


动 调整 为 内 容 尺 寸 ” 复 选 杠 ， 如 


图 7-37 所 示 。 


第 7 章 动态 面板 元 件 的 使 用 


= ee 6 
p 的 加 天 忌 
可 S| LoginPanel 
说 明 2 
中 同 友 洛 动 和 来 时 
回 点 回 RA 
[bn 更 多 事件 >>> -| 
加 | 
和 
手机 扫 码 安全 登录 团 自动 调整 为 内 容 尺 二 
使 用 手机 淘宝 阿里 钱 包 扫 揪 二 维 码 
Bag J 


图 7-36 


用 户 可 以 在 属性 中 勾 选 “自动 调整 为 内 容 尺寸 ” 复 选 框 ， 或 者 也 可 以 在 动态 面板 元 件 上 单 击 鼠 标 右键 ， 在 弹出 


的 快捷 菜单 


h 选 择 “ 自 动 调整 为 内 容 尺 寸 ”命令 。 


三 继续 在 “State2” 状 态 页 面 中 使 用 各 种 元 件 完成 页 面 的 制作 ， 如 图 7-38 所 示 。 制 作 完成 后 ， 


Tri | 
四 5 可 £2 


[3 
] 忘记 密码 ? 立即 注册 
| 


图 7-38 


回 index 页 面 ， 此 时 页 面 中 动态 面板 只 显示 了 一 部 分 “State1” 中 的 内 容 ， 如 图 7-39 所 示 。 


| 
5 而 忆 加 : 


E o 


手机 电码 安全 登录 


使 用 于 机 间 研 问 里 锭 名 扫 泣 二 维 码 
ae 


图 7-39 


" 目 


到 添加 两 个 矩形 元 件 到 工作 区 ， 作 为 登录 按钮 摆 放 在 动态 面板 的 上 层 ， 设 置 默认 样式 为 灰色 


字体 与 灰色 边框 ， 如 图 7-40 所 示 。 
加 在 "检视: 矩形 " 面板 中 设置 “ 选 q 
录 ” 和 矩形 的 “选中 ” 复 选 框 ， 如 图 7-41 所 示 。 


TT | 


图 7-40 


”的 交互 样式 为 黑色 字体 与 橙色 边框 ， 并 且 勾 选 “ 快 速 登 


wx 检 涡 - 皂 形 
( 超 2 作 移 
远近 形状 


交互 样式 设置 


刍 知 识 点 讲解 : 为 什么 只 勾 选 “快速 登录 ”的 “选中 ” 复 选 框 ? 


因为 勾 选 “ 快 速 登录 ”属性 中 的 “选中 ” 复 选 框 ， 可 以 让 用 户 看 到 在 页 面 打开 时 “快速 登录 ”| 
， 即 为 选中 后 的 默认 状态 。 


天 在 元 件 样式 面板 中 设置 这 两 个 矩形 只 保留 底部 边框 ， 如 图 7-42 所 示 。 同 时 选中 两 个 矩形 ， 
在 “属性 ”选项 卡 中 设置 选项 组 名 称 为 LoginButton， 如 图 7-43 所 示 。 


‘ 检视 :矩形 (2) D " 检视 :矩形 (2) 口 
WE | 
民 得 奈 控 下 | 一 
吧 运 中 Different across widgets 
CE 引用 页面 
引用 页 面 巴克 用 
we 回 选中 
加 四 中 设置 渤 项 组 名 称 
二 二 En 
元 人 提示 元 件 提示 
使 用 手机 淘宝 阿里 钱包 扫描 二 维 码 二 
Ta 
图 7-42 图 7-43 
刺 为 “快速 登录 ”按钮 添加 “鼠标 单 击 时 ”用 例 ， 弹 出 “用 例 编辑 ”对 话 框 ， 选 择 “ 设 置 选中 ” 
动作 ， 参 数 如 图 7-44 所 示 。 继 续 添加 “设置 面板 状态 ”动作 ， 参 数 如 图 7-45 所 示 。 
se 


图 7-44 图 7-45 


码 使 用 相同 的 方法 为 “账号 密码 登录 ”按钮 添加 “鼠标 单 击 时 ”用 例 ， 如 图 7-46 所 示 。 单 击 
“完成 ”按钮 ， 页 面 效 果 如 图 7-47 所 示 。 


手机 且 码 安全 登录 
使 用 手机 渔 主 阿 旦 忽 包 要 质 二 维 码 


图 7-46 
静 完成 后 ， 单 击 预览 按钮 ， 在 浏览 器 中 预览 效果 ， 如 图 7-48 所 示 。 


[gm 


第 7 章 动态 面板 元 件 的 使 用 | 


以 过 登录 ee 亿 汪 账号 宅 码 登录 
6 国志 ts 国 ] 
a lb; 
忘记 客 码 ? 立即 注册 国 

i 手机 扫 码 安全 登录 
Gy js 多 aoa 使 用 手机 淘宝 阿里 线 包 扫 挤 二 维 码 
图 7-48 
动态 面板 元 件 的 作用 D 


动态 面板 是 Axure RP 原型 制作 中 使 用 非常 频繁 的 一 个 元 件 ， 主 要 用 途 就 是 实现 一 些 动态 的 交互 
效果 。 所 以 ， 如 果 动态 面板 使 用 不 熟悉 的 话 ， 对 Axure RP 原型 的 制作 会 有 很 大 的 影响 。 那 么 动态 
板 都 能 做 什么 呢 ? 主要 有 以 下 几 个 方面 。 
隐藏 与 显示 。 
滑动 效果 。 
拖 动 效果 。 
多 状态 效果 。 
以 上 这 些 效果 都 在 移动 面板 的 元 件 属性 里 面体 现 。 那 通过 这 几 个 属性 都 能 实现 什么 样 的 功能 呢 ? 
简单 地 举 几 个 例子 。 


< 二 显示 与 隐藏 效果 ””@ 


用 户 经 常 在 做 原型 的 时 候 ， 需 要 单 击 按钮 后 出 现 一 些 界面 上 没有 的 元 素 ， 例 如 下 面 的 情况 。 
名 ”情景 A: 登录 功能 在 不 填写 用 户 名 时 单 击 登录 按钮 ， 显 示 出 要 求 用 户 填写 用 户 名 的 提示 。 
加 情景 B: 当 需要 在 用 户 执 行 某 一 个 操作 后 弹出 一 个 提示 框 。 当 用 户 单 击 提 示 框 的 “确定 ”按钮 
时 提示 框 消失 。 
诸如 以 上 情景 都 需要 用 到 动态 面板 的 显示 隐藏 效果 。 动 态 面 板 初始 状态 是 隐藏 还 是 显示 ， 可 以 通 
过 在 动态 面板 上 方 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 设 为 可 见 ( 或 设 为 隐藏 )” 命 令 来 实现 。 
Te 滑动 效果 © 
与 显示 隐藏 效果 不 同 ， 动 态 面板 的 滑动 效果 一 般 是 通过 其 他 交互 事件 来 激发 的 ， 可 能 是 点 击 某 
个 按钮 ， 也 可 能 是 页 面 加 载 时 实现 。 例 如 : 
加 ”情景 A: 网 站 上 的 一 些 滚动 文字 的 效果 。 
加 情景 B: 点 击 登录 按钮 ， 登 录 面 板 的 弹出 收 起 效果 。 
一 般 滑动 效果 都 需要 有 复杂 的 激发 过 程 ， 例 如 通过 页 面 的 OnPageLoad 事件 。 现 在 ， 在 此 不 做 
过 多 讲解 ， 以 后 将 会 通过 实例 的 方式 来 进行 介绍 ， 更 易 懂 一 些 。 


[ee 拖 动 效果 © 


动态 面板 的 拖 动 效果 ， 对 于 移动 互联 网 产品 原型 来 说 是 必需 的 ， 主 要 用 于 App 的 产品 原型 ， 用 
来 实现 面板 被 拖 动 时 产生 的 一 些 效果 。 


ooo 


动 
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日 ”情景 A: 手机 的 滑动 解锁 功能 。 
加 ”情景 B: 手机 页 面 的 纵向 浏览 功能 。 
日 情景 C: 手机 页 面 的 横向 换 页 功能 。 


动态 面板 的 拖 动作 用 非常 重要 ， 结 合 与 之 有 关 的 系统 自 带 变量 能 做 出 各 种 各 样 的 效果 。 例 如 ， 
Axure RP 本 身 是 没有 随机 数 功能 的 ， 但 是 在 拖 动 动态 面板 的 时 候 ， 是 可 以 实现 随机 数 功能 的 。 


ZZ 多 状态 效果 。 (@ 

动态 面板 的 多 状态 效果 ， 是 在 网 站 原型 中 应 用 非常 普遍 的 。 同 时 多 状态 效果 大 大 减少 了 使 用 动 
态 面板 的 数量 。 

例如 : 隐藏 一 个 面板 ， 显 示 另 外 一 个 动态 面板 的 效果 ， 就 可 以 用 同一 个 动态 面板 的 不 同 状态 来 
实现 ， 还 有 动态 面板 的 滑 进 滑 出 效果 有 时 也 可 以 通过 状态 更 换 来 实现 。 

又 如 : 动态 面板 的 滑动 效果 ， 就 是 分 别 用 动态 面板 滑动 与 动态 面板 状态 切换 来 实现 的 ， 在 网 页 
的 原型 中 选项 卡 效果 也 可 以 通过 动态 面板 状态 切换 来 实现 。 

动态 面板 的 不 同 状态 还 能 实现 图 片 轮 播 效果 、 图 形 转动 效果 等 。 

在 Axure RP 中 ， 可 以 把 元 件 或 多 个 元 件 转换 成 动态 面板 ， 其 实 是 把 这 些 元 件 放 在 了 一 个 动态 面 
板 的 状态 1 里 面 ， 也 就 是 说 动态 面板 其 实 是 一 个 多 层 的 容器 ， 容 器 的 每 一 层 可 以 包含 多 个 元 件 。 

用 户 可 以 在 动态 面板 管理 器 中 ( 软件 界面 的 右 下 角 ， 没 有 的 话 在 “导航 栏 ”> “视图 选项 ”中 勾 
选 ) 去 给 动态 面板 添加 多 个 状态 ， 同 时 能 够 调整 这 些 状态 的 顺序 ， 来 达到 不 同 的 显示 效果 。 动 态 面板 
默认 显示 动态 面板 管理 器 中 最 上 面 的 那个 状态 。 


号 下 中 继 器 元 件 的 使 用 p 


当 原 型 中 有 重复 的 对 象 时 ， 可 以 使 用 中 继 器 元 件 来 实现 。 中 继 器 元 件 的 使 用 可 以 使 原型 效果 更 加 
ee Ei 十 对 中 继 器 元 件 的 相关 内 容 进 行 讲 解 ， 帮 助 读者 了 解 中 继 器 元 件 的 组 


8.1 车 中 继 器 元 件 的 基本 组 成 


件 ， 是 一 


中 继 器 元 件 是 一 种 高 级 
个 存放 数据 集 的 


列表 、 


所 项 可 


> 妆 举 举 举 即 有 虹 可 


如 图 8- 
中 继 器 元 


继 器 ”面板 ， 
义 对 中 继 器 进行 编 


在 这 里 可 
辑 和 设置 。 
默认 1 


电表 等 。 
中 继 器 元 件 是 由 中 继 器 
据 集中 的 数据 项 填充 的 ， 


器 ， 通 常 使 用 它 来 显示 商 
其 系 人 信息 列表 和 


义 是 文本 、 图 片 或 


件 ， 


博 况 下 ， 中 继 器 的 


面 链 接 。 将 中 继 器 元 件 拖 
Axure RP 页 面 编辑 区 内 ， 
所 示 。 选 中 后 双击 


就 会 进入 “中 
如 图 8-2 所 示 。 


显示 数量 与 “检视 , 中 继 器 ” | 


面板 中 的 数据 行 一 致 。 默认 
元 件 为 一 列 3 行 ， 如 图 8-3 


所 示 。 


pe 位 于 “检视 : 


多 行 多 列 。 


数据 集 


单 


中 下 器 
攻 玉 


一 一 Column0 本 


1 


图 8-3 


击 “ 添 加 行 ”或 “添加 列 " 


成 添加 、 删除 等 操作 ， 如 图 8-5 所 示 。 


中 继 器 ”面板 的 底部 ， 如 图 8-4 所 示 。 数 据 集 可 以 包含 
即 可 完成 行 或 者 列 的 添加 。 也 可 以 通过 单 击 项 部 的 图 标 完 
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~ 中 起 器 
EE 下 入 
B 
[7 | 
于 ,汪汪 证 芋 深 ;+ 
图 8-4 图 8-5 


双击 列 名 可 以 对 其 进行 编辑 。 需 要 注意 的 是 ， 列 名 只 能 为 字母 、 数 字 和 “_”， 且 不 能 以 数字 开头 。 


数据 集中 的 内 容 可 以 包含 文本 、 导 入 图 片 和 引用 页 面 ， 图 片 的 导入 和 页 面 的 引用 可 以 通过 在 单 
元 格 上 单 击 鼠 标 右键 ， 选 择 相应 的 命令 来 进行 ， 如 图 8-6 所 示 。 
引用 
导入 图 片 


数据 集 的 表格 可 以 直接 进行 编辑 。 如 果 遇 到 数据 较 多 时 ， 可 以 选择 在 
下 移 先 中 行 Excel 中 进行 编辑 ， 然 后 通过 复制 粘贴 的 方式 ， 将 数据 粘贴 到 数据 集中 。 


左 移 选中 列 


从 Excel 复制 到 数据 集中 的 数据 未 尾 会 有 一 个 多 余 的 空 行 ， 为 了 避免 不 
| . 必要 的 错误 ， 要 将 其 删除 。 


图 8-6 


交互。 @ 


项 目 交互 主要 用 来 将 数据 集中 的 数据 传递 到 原型 中 的 元 件 并 显示 出 来 ， 或 者 根据 数据 集中 的 数 
据 执 行 相应 的 动作 。 

项 目 交互 只 有 3 个 触发 事件 : 载 入 时 、 每 项 加 载 时 和 项 目 调整 尺寸 时 ， 如 图 8-7 所 示 。 比 较 常 
用 的 事 “ 每 项 加 载 时 ”， 如 果 需 要 把 数据 集中 的 某 些 数据 直接 显示 到 模板 的 元 件 上 ， 就 可 以 在 这 里 
添加 用 例 动 作 ， 如 图 8-8 所 示 。 


上 检 栅 - 中 地 器 D 
1 (六 纤 3 用 动 
x 把 机 中 地 器 D 
层 性 说 明 样式 
和 ms | 
El ~ 外 
| “= “于 
2 + 泛 加 用 坑 
并 和 A 对 
二话 in 用 全 a 
时 载 入 时 4 Case1 
es 多 设 加 六 于 G85) Tomncoumol- 
el i | 
图 8-7 图 8-8 


:Ss 样式 设置 © 


选中 中 继 器 元 件 ， 用 户 可 以 在 “检视 : 中 继 器 ”面板 中 对 其 进行 样式 的 设置 ， 如 图 8-9 所 示 。 


> a 


通过 样式 设置 可 以 调整 中 继 器 的 排版 、 布 局 和 分 页 等 样式 。 Per 
在 “布局 ”选项 下 ， 默 认 情 况 下 为 “垂直 ”布局 方式 。 二 下 
选择 “水 平 ”方式 ， 元 件 则 更 改 为 水 平 布局 ， 如 图 8-10 所 | isc 
示 。 勾 选 “ 网 格 排 布 ” 复 选 框 后 ， 设 置 每 排 项 目 数 ， 则 布 全 
局 效果 如 图 8-11 所 示 。 和 汪 二 革 
图 8-9 
始 布局 口 短 直 图 水 平 
局 网 格 排 布 
| | 站 每 排 项 目 数 2 
图 8-10 图 8-11 


用 户 可 以 在 “背景 ”选项 下 设置 背景 颜色 。 背 景色 是 指 背 景 颜 色 的 设置 ， 如 果 被 不 透明 的 元 件 遮 挡 ， 则 背景 色 
不 能 显示 。 如 果 想 要 看 到 背景 色 的 效果 ， 可 将 元 件 的 填充 颜色 取消 或 者 设置 一 定 的 不 透明 度 。 


在 “分 页 ”选项 下 ， 用 户 可 以 设置 中 继 器 元 


分 页 同 | 多 页 示 
件 的 分 页 显示 功能 。 勾 选 “ 多 页 显示 ” 复 选 框 ， | 
用 户 可 以 在 “每 页 项 目 数 "文本 框 中 输入 每 页 项 
目的 数量 ,在 “起 始 页 " 文本 框 中 设置 起 始 页 码 ， i | 
如 图 8-12 所 示 。 图 8-12 


实例 30 制作 商品 展示 页 面 © 


在 了 解 了 中 继 器 的 基本 组 加 办 》 源 文件 ， 素 材 & 源 文件 第 8 意 \ 制 作 商 品 展示 页 面 'p 
成 和 使 用 方法 后 ， 接 下 来 将 带 ”网 》 操 作 视频 ， 视频 \ 第 8 章 \ 制 作 商 品 展示 页 面 .mp4 
领 用 户 使 用 中 继 器 元 件 制作 一 m 
个 简单 的 操作 实例 。 棒球 服 外 套 逆 腿 宰 呈 并 
玛 将 中 继 器 元 件 拖 入 页 pr 
中 ， 如 图 8-13 所 示 。 双 击 进入 编辑 页 ， 使 用 
图 片 元 件 和 文本 标签 元 件 完成 如 图 8-14 所 示 的 本 呈现 Fi 
页 面 制作 。 i wen we 
简约 小 白莲 时 尚 双肩 包 


图 8-13 图 8-14 
到 分 别 为 元 件 命名 ， 如 图 8-15 所 示 。 返 回 index 页 面 ， 在 “检视 : 中 继 器 ”面板 中 输入 各 项 
产品 的 参数 ， 在 pic 单元 格 中 单 击 右键 ， 在 弹出 的 快捷 菜单 中 选择 “导入 图 片 ”命令 ， 导 入 图 片 ， 完 
成 效果 如 图 8-16 所 示 。 


图 8-15 图 8-16 


码 在 “检视 ， 中 继 器 ”面板 中 “样式 ”选项 卡 下 设置 “布局 ”为 “水 平 ”， 勾 选 “ 网 格 排 布 ” 
复 选 框 ， 设 置 “每 排 项 目 数 ”为 2， 行 和 列 的 “间距 ”都 设置 为 10， 如 图 8-17 所 示 。 
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图 8-17 


到 双击 "Case 1”， 在 “用 例 编辑 < 每 项 加 载 时 >” 对 话 框 中 勾 选 name, 单 击 公 按钮, 在 “ 纺 
辑 文本 ”对 话 框 中 单 击 “ 插 入 变量 和 函数 ”选项 ， 选 择 如 图 8-18 所 示 。 使 用 相同 方法 分 别 为 unit、 
stock 设置 值 ， 如 图 8-19 所 示 。 

玛 单 击 添加 “设置 图 片 ”动作 ， 勾 选 pic 复 选 框 ， 在 Default 中 选择 “ 值 ”， 单 击 仪 按 钮 ， 添 
加 变量 值 如 图 8-20 所 示 。 返 回 index 页 面 ， 页 面 效 果 如 图 8-21 所 示 。 


第 8 章 中 继 器 元 件 的 使 用 


尘 闻 、 数字. 不 包 二 帮 . 


Ce mm 
阔 艰 裤 显 间 
ef 1 
a 
Drm 黑色 小 短 袜 
es Was re 
上 一 -一 BF 加 
Es 可 
Bi 下 
Es Dm 
EE 
A ry 时 尚 双肩 包 
em w 


卫 居 性 设置 。 人 @ 


中 继 器 属性 包括 “取消 单 选 按钮 组 效果 ” “取消 选项 组 ”和 “适应 HTML 内 容 ” 三 部 分 。 这 三 
个 属性 分 别针 对 单 选 按钮 、 选 项 组 和 适 配 HTML 时 使 用 。 
加 ”取消 单 选 按钮 组 效果 : 此 选项 控制 是 否 在 单 选 按钮 组 中 只 能 选中 一 个 按钮 的 效果 。 
外 ”取消 选项 组 :此 选项 控制 操作 是 否 在 操作 组 中 运行 。 
自 ” 适 应 HTML 内 容 : 此 选项 影响 页 面 对 HTML 的 适 配 效果 。 


实例 31 一 一 制作 单 选 按钮 效果 


在 用 户 已 经 会 使 用 “加 woet 
中 继 器 元 件 的 基础 上 ， 入 半 信 
继续 带领 用 户 制作 设置 、 哇 刁 国 护 : 
中 继 器 名 项 参数 的 操作 十 守 
实例 。 

邮 ) 将 中 继 器 元 件 拖 入 页 面 中 ， 双 击 
进入 编辑 页 ， 使 用 矩形 元 件 和 单 选 按钮 元 
件 完成 如 图 8-22 所 示 页 面 的 制作 ， 并 为 
逢 形 命名 。 


外 


* 源 文件 ， 素材 &% 源 文件 \ 第 8 章 \ 制 作 单 选 按钮 效果 .rp 
“操作 视频 : 视频 \ 第 8 章 \ 制 作 单 选 按钮 效果 .mp4 
姓名 年 级 院 系 
单 选 按钮 路 悠 言 未 = 英语 系 
单 选 按钮 贝 微微 关 = 计算 机 系 
姓名 年 级 院 系 
单 选 按钮 顾 夜 白 夫 三 绘画 系 
单 选 按钮 贝 微微 二 计算 机 系 
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(中 竹器 ) (index) x* Ingex 下 
| es 


|100 


图 8-22 
现 执行 “项 目 ”>“ 项 目 设置 " 命令 ,在 “项 目 设置 ”对 话 框 中 选择 “边框 重合 ” 单 选 按钮 ， 
获得 更 好 的 显示 效果 ， 如 图 8-23 所 示 。 将 全 部 内 容 选中 ， 单 击 工具 栏 上 的 “组 合 ”按钮 或 按 快捷 键 
Ctr+G， 将 所 选 对 象 编组 ， 并 将 其 命名 为 bg， 如 图 8-24 所 示 。 


图 8-23 图 8-24 


表单 击 交互 样式 下 的 “选中 ”选项 ,设置 其 “填充 颜色 ”为 #00FF66， 如 图 8-25 所 示 。 在 “ 设 
置 选项 组 名 称 ” 文 本 框 中 设置 选项 组 名 称 为 big， 如 图 8-26 所 示 。 


v 四 shapes 加 禁用 
选择 形状 | 加 ~ 四 ij 让 
设置 选项 组 名 称 

交互 样式 设置 党 

上 鲁 标 县 售 a 

筷 标 按 下 元 件 扣 示 

忠 选中 #00FF66; 

迟 整 用 v @ shapes 

图 8-25 图 8-26 


BV) 双击 “鼠标 单 击 时 ”事件 ， 选 择 “选中 ”动作 ， 勾 选 “ 中 继 器 ” 复 选 框 ， 设 置 参 数 如 图 
8-27 所 示 。 返回 index 页 面 中 , 在 “检视 : 中 继 器 ”面板 下 的 属性 面板 中 设置 “中 继 器 ”的 各 项 参数 ， 
如 图 8-28 所 示 。 


图 8-27 


第 8 章 “ 中 继 器 元件 的 使 用 ， 


Y 中 崔 器 

coumno la lb ce E22 

1 路 名言 大 一 英 滞 系 出 
2 搬 夜 白 = 绘画 系 

8 贝 激 起 二 计算 机 系 = 
0 


图 8-28 


三 继续 添加 动作 ， 效 果 如 图 8-29 所 示 。 取 消 勾 选 “检视 : 中 继 器 ”面板 底部 的 
效果 ” 复 选 框 ， 如 图 8-30 所 示 。 


“取消 选项 组 


ll! 


ud 


: 
中 


多 取 港 单 选 按钮 组 效果 
三 ” 取 湛 选项 组 效果 
图 适应 Html 内 容 


图 8-29 图 8-30 


三 使 用 文本 标 等 元 件 在 工作 区 添加 文字 ， 单 击 工具 栏 上 的 “预览 "按钮 或 者 按 F5 键 预览 页 面 ， 
预览 效果 如 图 8-31 所 示 。 


姓名 年 级 院 系 姓名 年级 院 系 
单 过 得 | 。 路 个 言 大 一 并 8 系 
, 单 选 所 外。 | 。 刷 枚 折 大 = 绘画 系 
单 和 扩 组 | 。 由 向 微 | 大 二 | 计算 i 单 选 接 笨 。 | 。 贝 汪 向 大 = 计算 机 系 
图 8-31 


数据 集 的 操作 5 


掌握 了 中 继 器 的 组 成 后 ， 接 下 来 了 解 中 继 器 数据 集 的 操作 。 数 据 集 可 以 完成 添加 、 删 除 和 修改 
等 操作 ， 并 能 够 实时 呈现 。 这 就 让 原型 产品 的 效果 更 加 丰富 、 逼 真 。 同 时 中 继 器 还 具有 筛选 功能 ， 
能 够 让 数据 按照 不 同 的 条 件 排列 。 

中 继 器 动作 中 可 以 使 用 “数据 集 ” 动 作 控制 中 继 器 添加 行 、 标 记 行 和 更 新 行 等 操作 ， 各 动作 具 
体 含义 如 下 。 
自 添加 行 : 为 中 继 器 的 数据 集 添加 行 。 
加 ”标记 行 : 为 中 继 器 的 数据 集 标记 行 。 
加 ”取消 标记 : 为 中 继 器 的 数据 集 取消 标记 行 。 
加 ”更 新 行 : 为 中 继 器 的 数据 集 更 新 行 。 
加 ”删除 行 : 为 中 继 器 的 数据 集 删 除 行 。 
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实例 32 一 使 用 中 继 器 实现 和 省 人 


的 0 》 源 文件 ， 素材 & 源 文件 \ 第 8 章 \ 使 用 中 继 器 实现 自 增 .rp 

个 临时 的 * 操作 视频 : 视频 \ 第 8 章 \ 使 用 中 继 器 实现 自 增 .mp4 

是 的 

数据 库 ， 这 

we (wa | 


在 就 是 为 了 演示 产品 原型 设 
计 的 读 、 存 、 删 和 改 。 
芭 新 建 Axure RP 文档 。 

将 按钮 元 件 拖 入 页 面 中 ， 修 
改 按钮 文字 如 图 8-32 所 示 。 
将 中 继 器 元 件 拖 入 页 面 中 ， 
双击 修改 中 继 器 宽度 ， 并 将 

“数据 集 ” 栏 目 删除 至 1 行 ， 
如 图 8-33 所 示 。 


图 8-32 图 8-33 


玛 返回 index 页 面 , 将 中 继 器 元 件 命名 为 RE, 如 图 8-34 所 示 。 选 择 按钮 元 件 , 双击 "鼠标 单 击 时 ” 
选项 ， 添 加 “添加 行 ”动作 ， 勾 选 RE 复 选 框 ， 单 击 “ 添 加 行 ”按钮 ， 如 图 8-35 所 示 。 
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图 8-34 图 8-35 


三 在 弹出 的 “添加 行 到 中 继 器 ”对 话 框 中 单 击 仪 按钮 ， 如 图 8-36 所 示 。 在 弹出 的 “编辑 值 ” 
对 话 框 中 单 击 “ 添 加 局 部 变量 ”按钮 ， 设 置 各 项 参数 ， 如 图 8-37 所 示 。 

藉 单 击 “插入 变量 和 函数 ”选项 ， 插 入 变量 的 效果 如 图 8-38 所 示 。 单 击 “ 确 定 ”按钮 ，“ 添 
加 行 到 中 继 器 ”对 话 框 如 图 8-39 所 示 。 
了 单 击 两 次 “确定 ”按钮 ， 页 面 效果 如 图 8-40 所 示 。 单 击 工具 栏 上 的 “预览 ”按钮 ， 预 览 效 
果 如 图 8-41 所 示 。 
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图 8-36 图 8-37 
Ee — 
在 下 方 将 罗 过 入 文 直 , 交 台 多 检 或 表达 元 腾 写 在 下 中 。b90 ; 质 入 安 业 OnLoadvanacle Ee 居住 力 交 鲁 "OnLoaqvaraole 交 | 
当前 东 | 黄 入 表达 式 IaIA~ eIB[ 妈 号 值 为 "ValA* VB 的 和 ; 逢 入 P399Namel 到 且 信 为 二 关内 名称， 
Ea 
MR Lemomer Ih 
图 运 bo 行 到 中 经 器 
生 呈 号 
在 下 方 旭 用 于 据 N 的 有 和 ， 月 和 客机 中字 后 、 和 二 不 三 从 
FE = 5 [AR1emCount+1] fx | 
0 fx 


执行 “项 目 ”>“ 项 目 设置 ”命令 ,在 “项 目 设置 ”对 话 框 中 选择 “边缘 重合 ”选项 ， 可 以 使 相连 的 边线 自动 重 


， 获 得 更 好 的 显示 效果 。 


项 目 列表 操作 p 


实例 33 一 一 使 用 中 继 器 添加 分 页 1 © 


Axure RP 8.0 很 大 的 亮点 就 是 中 继 器 ， 它 就 是 一 个 数据 集 ， 里 面 可 以 导入 数据 


中 继 器 中 的 项 目 列表 通常 是 按照 输入 数据 的 顺序 进行 显示 的 。 用 户 可 以 通过 添加 交互 ， 实 现 更 
加 丰富 的 显示 效果 ， 例 如 按照 价格 升降 序 排列 等 。 


和 


测 


像 ， 新 增 行 、 删 除 行 、 进 行 排序 和 筛选 数据 ， 高 级 交互 常用 。 
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到 打开 8.1.3 节 中 的 文件 ， 效 
果 如 图 8-42 所 示 。 双 击 “ 检 视 : 页 面 ” 
板 中 的 “ 载 入 时 ”事件 ， 选 择 “ 设 


上 源 文件 : 素材 & 源 文件 \ 第 8 章 \ 使 用 中 继 器 添加 分 页 1.rp 
> 操作 视频 : 视频 \ 第 8 章 \ 使 用 中 继 器 添加 分 页 1.mp4 


置 每 页 项 目 数量 ”动作 ， 勾 选 “ 中 棒球 服 外 套 阔 服 裤 显 瘦 

继 器 ” 复 选 框 ， 设 置 显示 数量 为 4， Se ¥278 商品 单价 #159 

如 图 8-43 所 示 。 斌 三 乱 a 
雪 纺 连 衣 福 黑色 小 短 衫 
高 号 单价 半 339 WMY FHS 
商 后 库存 。 12 商品 库存 89 
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HE 


ja 
上 
[| 


归 和 让 


| 
Sm [4 J 
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图 8-42 图 8-43 


到] 单 击 “ 确 定 ” 按 钮 后 预览 页 面 ， 预 览 效果 如 图 8-44 所 示 。 要 实现 分 页 效果 ， 也 可 以 在 “ 监 
视 ， 中 继 器 ”面板 中 的 “布局 ”选项 下 设置 参数 ， 获 得 分 页 效果 ， 如 图 8-45 所 示 。 
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图 8-45 


实例 34 一 一 使 用 中 继 器 添加 分 页 2 


继续 接着 上 一 个 实例 ， 
为 产品 原型 设计 页 面 中 的 
一 些 商品 进行 排序 。 
到 将 按钮 元 件 拖 入 


gd 


> $s as 


p> 源 文件 ， 素材 & 源 文件 \ 第 8 章 \ 使 用 中 继 器 添加 分 页 2.rp 
p> 操作 视频 : 视频 \ 第 8 章 \ 使 用 中 继 器 添加 分 页 2.mp4 


页 面 中 ， 调 整 大 小 、 位 置 

和 文字 内 容 ， 效 果 如 图 8-46 所 示 。 选 中 EN i 
按钮 ， 双 击 “检视 ， 提 交 按 钮 ”面板 上 的 “| 辕 
“鼠标 单 击 时 ”事件 。 选 择 “ 添 加 排序 ” | 

动作 ， 选 择 按照 价格 进行 “升序 ”排列 ， 

如 图 8-47 所 示 。 阔 泪 裤 量 瘦 雪 纺 连衣裙 


图 8-46 图 8-47 
表单 击 “确定 " 按钮 , 返回 index 页面 , 单 击 工具 栏 上 的 “预览 " 按钮 , 预览 效果 如 图 8-48 所 示 。 
棒球 服 外 套 阔 腿 祷 显 冲 时 尚 双肩 包 棒球 服 外 碍 
aa va Haen im man as aa Van 
Ries + ase ag 天 map 4 
黑色 小 短 福 阔 铺 裤 显 冲 雪 纺 连衣裙 
MEM 11 Be 9 高 癌 生 价 ¥339 
SE 存 的 二 存 31 高 骂 库 存 12 
图 8-48 


实例 35 一 一 使 用 中 继 器 添加 分 页 3 


© 


接着 上 一 个 操作 实例 ， 为 产品 原型 设计 的 分 页 添加 页 面 按 钮 选项 ， 可 以 使 用 户 
在 浏览 器 中 方便 快捷 地 查看 分 页 效果 。 
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疯 继续 使 用 按钮 元 件 创 建 如 图 8-49 | * 源 文 件 。 素 材 & 源 文件 第 8 章 \ 使 用 中 继 器 添加 分 页 ap 
所 示 的 效果 。 选 中 首页 按钮 ， 双 击 “ 鼠 标 。 | ,操作 视频 : 视频 ,第 8 章 \ 使 用 中 继 器 添加 分 页 3 mp4 
单 击 时 ”事件 ， 选 择 “ 设 置 当前 显示 页 面 " 
动作 器 ” 复 选 框 ， 选 择 页 


为 Value， 效果 如 图 8-50 所 示 。 ne hh a 


DD DE EE 
图 8-49 图 8-50 


OD 使 用 同样 方法 为 “ 尾 页 ”按钮 选择 Last，“ 上 一 页 ”按钮 选择 Previous，“ 下 一 页 ”按钮 


选择 Next， 完 成 效果 如 图 8-51 所 示 。 
消 棒球 服 外 套 站 阔 腿 裤 显 瘤 
© 本 
个 纺 过 胡可 人 黑色 小 二 说 
: .> i 


GD ED ED ED 


图 8-51 


实例 36 一 使 用 中 继 器 添加 分 页 4 © 


中 继 器 可 以 帮助 用 户 在 原型 设计 页 面 中 保存 数据 ， 并 且 提 供 增删 改 查 等 功能 ， 
帮助 用 户 完成 复杂 的 交互 场景 。 例 如 : 添加 一 个 好 友 后， 好 友 列 表 中 就 新 增 一 行 对 
应 的 记录 。 上 传 一 张 照 片 后 ， 在 对 应 的 地 方 多 了 一 张 照片 等 。 


第 8 章 中 继 吉 元 件 的 使 用 


芭 使 用 文本 标签 元 件 创建 如 图 8-52 | 、 源 文 件 ， 素材 & 源 文件 第 8 章 \ 使 用 中 继 器 添加 分 页 4.rp 
g apa a ;操作 视频 :视频 \ 第 8 章 \ 使 用 中 继 器 添加 分 页 4.mp4 
q, 再 次 创建 一 个 未 签 ， 
指定 名 称 为 Al， 如 图 8-53 所 示 。 (By) le 
. 阔 腿 裤 显 瘦 
i 
黑色 小 短 袜 


第 页 / 共 2 99 呈 © 
Se 


阔 腿 裤 显 瘦 
商品 单价 半 159 


图 8-52 图 8-53 
了 三 选择 中 继 器 元 件 ， 双 击 “ 载 和 时” 事件， 选择 “设置 文本 ”动作 ， 勾 选 dq 复 选 框 ， 设 置 文 
本 为 “ 富 文本 ”， 如 图 8-54 所 示 。 单 击 “编辑 文本 ”按钮 。 在 “输入 文本 ”对 话 框 中 单 击 底部 的 “ 添 
加 局 部 变量 ”选项 ， 设 置 如 图 8-55 所 示 。 


图 区 和 文本 人 
方 帝 短 区 输入 文本 并 设置 文本 样式 ,过 量 名 称 或 表 过 式 要 写 在 0 : 插入 变量 [Myvarji 回 值 为 
Er 播 入 囊 达 式 JVarA + VarBJj 回 值 为 VarA+ VE 插入 [PageName] 返回 什 为 当 
Aral 
运送 要 设置 文 地 的 元 件 Normal ”| 108 
加 元 有 B TU A = 
晤 才 元 他 国 三 三 
可 La 
a 播 入 这 是 或 函 至 
ER) | | 
4 chanpin (中 举 神 ) 
ic OW) 
下 JOER) 
六) 局 部 交 全 
(了 E 才 ) 在 下 方 创建 用 于 括 入 ft 的 局 部 支 量 ,局 部 专 重 名 称 必 用 是 字母 、 数 字 , 不 允许 包含 全 格 。 
name OE) Em 
pe) tvant = | 元 (中 站) 
ES) 
全 二 
臣下 如 
宇文 本 + 
图 8-54 图 8-55 


| Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 
i 示 式 ， 如 图 


同 单 击 “ 插 入 变量 或 函数 ”选项 ， 选 择 pageindex 函数 ， 并 在 右 侧 设置 显示 文本 样式 ， 页 
8-56 所 示 。 单 击 “ 确 定 ”按钮 。 义 选 Al 复 选 框 ， 使 用 相同 的 方法 添加 文本 ， 如 图 8-57 所 示 。 
EM | 二 
Ss 5 Tr J] 区 - 
| Aa EAE 
| : | 
在 下 方 部 娃 用 于 插入 fx 的 局 部 要 蚤 ， 局 邵 冯 旦 名 称 必 丹 攻 字 母 、 数 字 . 不 允许 名 会 宝 属 ， chr 数字 不 允许 名 合 字 柯 ， 
| | | 
Caocso| CJ | 
图 8-57 


图 8-56 


为 了 保证 分 页 面 中 的 每 一 个 都 能 够 正确 显示 总 页 数 和 当前 页 数 ,需要 将 显示 页 码 的 事件 添加 到 所 有 控制 按钮 上 。 


1 会 
ov, 


三 在 “检视 : 中 继 器 ”面板 中 选择 刚刚 创建 的 事件 ， 按 快捷 键 Ctt+C 或 执行 “复制 
如 图 8-58 所 示 。 选 择 底部 “首页 ”按钮 ， 在 Case 1 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 粘 


;和 他 
贴 ”命令 ， 如 图 8-59 所 示 。 
ed a D 天 ed D 
1 (SS 天 3 ( 息 Z9 现 
ml mt | EB nt 
Pr 4 Be 二村 
2 ca 2 ct 
罗 i 和 RE 数 于 (中 昌 沁 为 曙 识 时 当地 天 于 (+ 起 吕 ) 力 1 
4 casez 多 er. me 
CT md 2 mee 
a | ee | 
有 RR 
4 caset 
克之 3 于 sd 全 MD) 要 多 事件 >>> 
Es J 
el .| 2 
因 世 Rd 时 ~ Ex 
~ +s 过 SFH 状 世 
将 
aaa FE EE 二 上 
图 8-59 


三 继续 使 用 相同 的 方法 ， 复 制 事件 到 其 他 几 个 按钮 上 。 单 击 工具 栏 上 的 “预览 ”按钮 ， 预 览 
原型 产品 的 效果 ， 如 图 8-60 所 示 。 


er He Psa 
| = 入 = 
人 
ED ED ED ED ED 


图 8-60 
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ese 
Host Shaore Discuss 


[9.1 匡 创 建 共享 位 置 只 


在 创建 团队 项 目 时 ， 要 做 好 准备 工作 。 首 先 需要 存储 项 目的 空间 位 置 ， 共享 项 目 位 置 可 以 创建 
三 以 下 位 置 。 
3 共享 的 网 络 硬盘 。 
人 @ ”公司 共享 的 SVN 服务 器 。 
3 ”SVN 托管 服务 器 ，Beanstalk 或 者 Unfuddle。 
不 管 使 用 哪 种 方式 ， 都 需要 有 一 个 地 址 ， 有 了 这 个 地 址 用 户 就 可 以 创建 团队 项 目 了 。 


在 本 书 中 将 使 用 VisualSVN Server 服务 端 和 TortoiseSVN 客户 端 搭配 工作 。 现 在 Subversion 已 经 
迁移 到 apache 网 站 上 了 ， 下 载 地 址 如 下 。 
httpysubversion.apache.org/packages.html#windows， 如 图 9-1 所 示 。 


多 。 CollabNet (supported and certified by CollabNet; requires registration) 
A 
» SlikSVN (32- and 64-bit client MSI; maintained by Bert Huijben, SharpSvn project) 
ey installs 32- and 64-bit command line tools and svnserve; supported and maintained by 


ANdisco (32- and 64-bit client and server; supported and certified by WANdisco; requires registration) 
» Win32Svn (32-bit dient, server and bindings, MSI and ZIPs; maintained by David Darj) 
图 9-1 


SVN(Subversion) 是 近年 来 崛起 的 版 本 管理 工具 。 目 前 ， 绝 大 多 数 开源 软件 都 使 用 SVN 作为 代码 版 本 管理 软件 。 


如 何 快速 建立 Subversion 服务 器 ， 并 且 在 项 目 中 使 用 起 来 ， 这 是 大 家 最 关心 的 问题 。 通 过 Subversion 使 用 几 个 命令 可 
以 非常 容易 地 建立 一 套 服务 器 环境 。 


分 别 VisualSVN Server 和 TortoiseSVN 客户 端 ， 在 TortoiseSVN 下 载 页 面 的 底部 可 以 选择 
载 中 文 语言 包 ， 如 图 9-2 所 示 。 
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Open Source 

SOURCEFORGE.NET* 2007 Language packs 

COMMUNITY CHOICE AWARDS 

ee Country 32Bit 64Bit Separate manual (PDF) 
| Albanian Setup Setup Translate to Albanian 
国 Arabic Setup Setup Translate to Arabic 
Bulgarian Setup Setup 。 Translate to Bulgarian 


国 Chinese, traditional Setup Setup 。 Translate to trad. Chinese 

二 Croatian Setup Setup Translateto Croatian 

lm Czech Setup Setup ”TSVN 四 TMerge 四 

中 Danish Setup Setup Translate to Danish 

三 Dutch Setup ”Setup ”TSVN 四 TMerge 四 
图 9-2 


VisualSVN Server 是 一 个 集成 的 SVN 服务 端 工具 ， 并 且 包 含 mmc 管理 工具 ， 是 一 款 SVN 服务 
端 不 可 多 得 的 好 工具 。 在 使 用 VisualSVN Server 之 前 ， 需 要 首先 安装 该 工具 。 网 站 中 为 用 户 提供 了 
32 位 和 64 位 两 个 版 本 的 选择 ， 如 图 9-3 所 示 。 用 户 可 以 根据 个 人 情况 选择 下 载 。 


VisualSVN for Visual Studio 2015 and older Download 
Includes Apache Subversion 1.9.7 command line tools. Version: 5.1.9 
A professional grade Subversion integration plug-in for Microsoft Visual Size: ~5 MB 
Studio. VisualSVN is intended to be installed on workstations used by 
software developers. 

rm mor Vi N integration for Visual 上 


VisualSVN Server 
加 cludes Apache Subversion 197 command line tools. 
The most favored way to setup and maintain an enterprise level Apache 


Subversion server on the Microsoft Windows platform. VisualSVN Server is 
useful either for home, small business or enterprise users. Version 3.8.0 
Im Visual rver for Window: Size: ~9 MB 


VisualSVN Repository Configurat Download 

VisualSVN Repository Configurator is a standalone application which allows Version: 3.8.0 

non-administrative users to manage VisualSVN Server repositories remotely. Size: ~1 MB 
rr itory Mi: ment Delegation 


图 9-3 
下 载 完成 后 ， 双 击 VisualSVN Server 安装 包 ， 开 始 安装 VisualSVN Server， 弹 出 如 图 9-4 所 示 
对 话 框 。 单 击 Next 按钮 ， 弹 出 用 户 协议 对 话 框 ， 如 图 9-5 所 示 。 
央 VialSWN sever3805ep 2 一 


Welcome to the VisualSVN Server 3.8.0 
Setup Wizard 


ne 


End-User License Agreement 
Please read the folowng icense agreement carefuly 


The Seaup Wzard wll nstal VieualSWN Server 3.5.0 on your [License Agreement for VisualSVN Server 到 


computer. Cick Next to continue or Cancal to exlt the Setup 
Wizard. 


由 “VISUALSVNSERVER ~ 
1 accept he terms in the License Agreement 


| Em Ce ) Eee 


图 9-4 图 9-5 - 
勾 选 同意 协议 复 选 框 ， 单 击 Next 按钮 ， 进 入 如 图 9-6 所 示 的 对 话 框 ， 单 击 Next 按钮 。 单 击 对 
话 框 中 的 Standard Edition 按钮 ， 如 图 9-7 所 示 。 


列 


Select Components 
Please select companents you wouid ke to install, 


NN 所 


vee srr so 


Please select which edion of VisualSVN Server you'd ie to install 


You can either choose to perform he full insialation of VisualSVN Server or only nstall 
the corresponding admnistration tools. Please select components you want 加 be 
‘nstalled on tis computer. 


® VisualSVN Server and Administration Toak 
Instal server-side omponents and al the administation toaE 


There are two edions ofVisualSW Server avalable and depending on your needs you 
cn choose which one aiis you best 


A fly functona server thatis greatforindividuas and smal groups, Tuy 
ee ofcharge and permitted for commeraal use. 


图 9-6 


Enterprse Editon 
The best opbon fer SM and enterprioes, Prowder addtonal featires sd a 
Active Directory Sngle Sign-On and Remote Server Administration. 
Compare Editions... 
ea Eeee | 
图 9-7 


在 Location 中 指定 VisualSVN Server 的 安装 目录 ， 在 Repositories 中 指定 版 本 库 目 录 ， 在 Server 


Por 中 指定 一 个 端 
Next 按钮 ， 如 图 9-9 所 示 。 
Tr 


Initial Server Confiouration 
Please adjust the default configuration settngs if necessary. 


Lecation: [C:\Program FlesWisualSVN Server\ Browse,,, 
Repoatores [ErRepesiorenl rove 
ServerPort: 443 ”Use secure connection (https:/) 

Backups: |C: Wsers\Public \Documents \WisualSVN Server Badup\ Browse 


， 勾 选 Use secure connection( 使 用 安全 连接 ) 复 选 框 ， 如 图 9-8 所 示 。 单 击 


SR 
Ready to Install 
The Setup Wzard is ready to begn 


dk Install 虽 begn the nstalation If you want to review or dhange any of your 
nstalation settings, didk Back. Cidk Cancal to ext the wizard. 


Cs JC ) Cone 


图 9-8 
单 击 Install 按钮 , 开始 安装 过 程 , 如 图 9-10 所 示 。 稍 等 片刻 , 在 弹出 的 对 话 框 中 单 击 Finish 按钮 ， 
即 可 完成 安装 ， 如 图 9-11 所 示 。 

rrr | 


Instaling VisualSVN Server 3.8.0 


Please wat whie the Setup Wizard installs VsualsyN Server 3.5.0. 


Status: Creating security groups 
| 


图 9-9 


Completing the VisualSVN Server 3.8.0 
Setup Wizard 


Chck the Finish button to exit the Setup Wirard, 


subsorbe for release notifications va emal or RSS 


园 startwsuasw Server Manager 


VISUALSVNSERVER 


图 9-10 


图 9-11 


接 下 来 安装 TortoiseSVN，TortoiseSVN 是 Subversion 版 本 控制 系统 的 一 个 免费 开源 客户 端 ， 可 
以 超越 时 间 地 管理 文件 和 目录 。 文 件 保存 在 中 央 版 本 库 ， 除 了 能 记 住 文件 和 目录 的 每 次 修改 以 外 ， 


版 本 库 与 普通 文件 服务 器 很 像 。SVN 为 程序 开发 


的 安装 。 


下 载 TortoiseSVN 安装 程序 后 ， 双 击 TortoiseSVN 安装 包 ， 弹 出 如 图 9-12 所 示 的 对 话 框 。 单 刘 


团队 提供 常用 的 代码 管理 ， 下 面 介 绍 TortoiseSVN 


Er 


Next 按钮 ， 勾 选 同意 协议 复 选 框 ， 单 击 Next 按钮 ， 如 图 9-13 所 示 。 


Kal 
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End-User License Aoreement 
Zz Welcome to the TortoiseSVN | Pesse read the folowing leense agreement carefuly 
> 1.9.7.27907 (64 bit) Setup 

Wizard 
wm [Copyront (C) 2003-2017- Stetan King 
ortoiseSVN is free. You dont have to pay for tt and you can use tany way you want | 
vo The Setup Werard wil install TortoiseSWN 1.9.7.27907 (64 Itis developed as an Open Source project under he GNU Gensral Public License 
a on your op Cek ext to cominue or Canca 昌 (GPL That means you have full access to the source code of this program You can 
a et the Setup Wizard diton our website at hitp -Morioisesvn .net 
IShould you wish to modiy or recistribute this program or any part ofit, you should 
D Iread he full terms and condiions setoutinthe license agreement before doing so 
ed copy of the licanse is arailable on our website. 
fyou simply wish to install and uss this sofware, you need ony be aware of the 
© Idisclamer condiions in he license, which are set out below. 
INO WARRANTY 
I PE OE 世 
[<eac | Canal <Back Canal 
图 9-12 图 9-13 


保持 默认 安装 地 址 ， 单 击 Next 按钮 ， 进 入 如 图 9-14 所 示 的 对 话 框 。 继 续 单 击 Next 按钮 ， 开 始 
安装 过 程 ， 如 图 9-15 所 示 。 


Custom setup Ready to Install 
Pikan nstal location andwhidh featres you want 此 : The Setup Wizard sready to begn the Custom nstalaton 


Clck Instal to begn the nstalation, If you want to review or dhange any of your 
rstalation setings, dd Back. Cid Cancel to ext the wizard. 


Lecation: C:\Program Fles\ortoiseSYN\ 


Reset Dek Usage | [ <Back 


图 9-14 图 9-15 


可 以 看 到 安装 的 过 程 ， 如 图 9-16 所 示 。 稍 等 片刻 ， 单 击 Finish 按钮 ， 即 可 完成 软件 的 安装 ， 如 
9-17 所 示 。 


nstaling TortoiseSw 1.9.7.27907 (64 bit) 


Completing the TortoiseSVN 
1.9.7.27907 (64 bit) Setup 
Wizard 

Cher the Fnih button to exit the Setup Wizard. 


Please wat whie the Setup Wizard instals TortoiseSYN 1.9.7.27907 (64 bt). Th 
may take several minutes. 


Status: Creating shortauts 


i 回 show Changelog 


Thanks for using TortoiseSVN. You can show your appreciation and support future 
donating! 


Thanks for usng TortolseSVN- You can show your 
development by 


apprcaation and support future development by 
dorating! 


TortoiseSVN 


| 


图 9-17 


在 安装 过 程 中 ,会 提示 关闭 一 些 应 用 程序 ， 按 照 提示 单 击 OK 按钮 即 可 。 如 果 没 有 关闭 则 不 能 正常 安装 。 


接 下 来 开始 安装 中 文 语言 包 ， 运 行 中文 语 音 包 ， 按 照 提示 单 击 Next 按钮 即 可 完成 安装 ， 如 图 
9-18 所 示 。 


a 
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其 TortoiseSVN Chinese, simplifed Setp [一 > 一 | 
Welcome to the "TortoiseSVN Chinese z Completed the "TortoiseSVN Chinese, 
simplified" Setup Wizard > simplified" Setup Wizard 

Sb 
wm ”cic the Finich button to ext the Setup Wizard. 
ol ar 
n 


Cee am) [ae 


图 9-18 


安装 完成 后 ， 在 桌面 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 TortoiseSVN>Settings 命令 ， 如 
9-19 所 示 。 在 弹出 的 对 话 框 中 设置 Language 为 中 文 ， 如 图 9-20 所 示 。 


于 E 创建 版 本 库 © 


在 “开始 ”菜单 中 找到 VisualSVN Server Manager， 启 动 后 效果 如 图 9-21 所 示 。 窗 口 右 侧 显示 
版 本 库 的 各 种 信息 。 在 左 侧 窗口 Repositories 文件 夹 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “新 
建 ”> repository 命令 ， 弹 出 相应 的 对 话 框 ， 如 图 9-22 所 示 。 


| Repository 了 ane 


Re @| 
i 


Repository Name: 
| 


| 


图 9-22 


在 弹出 的 Create New Repository 对 话 框 中 保持 默认 ， 单 击 “ 下 一 步 ”按钮 ， 如 图 9-23 所 示 。 
为 版 本 库 指定 一 个 名 称 ， 如 图 9-24 所 示 。 


图 9-21 


全 
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Create New 


| eresitor 
Spe 


Be ed he on 


Repostory Name; 
Repository]| 


CES 


Em 


ES0) 
图 9-23 


图 9-24 


版 本 库 名 称 可 以 包含 字母 、 数 字 、 破 折 号 、 点 或 下 画 线 。 开 始 和 结束 都 不 能 使 用 点 


单 击 “ 下 一 步 ” 按钮 ， 选 择 包含 默认 文件 夹 ， 如 图 9-25 所 示 。 单 击 “ 下 一 步 ”按钮 ， 保 持 默 认 
属性 ， 单 击 Create 按钮 ， 如 图 9-26 所 示 。 


中 


Seect the preferred nital repository structure. 
© Cmpty repository (recommended option) 


Set the kind of permissions you want for the new repository. 
Sngle-project repository (with the top-evel runk, ‘branches and "tags’ fokders) 


© Nobody hos acess 


® A Subverson users have Read | Write acress 


You can create the desired repositcry structure later using the Create Folder or Create Project 
StrJcture context menu commands for the created repocitory. 


DD Customize permssions 


[oswm., ] 


ee 
context menu commends for the qreated repost 


Learn more about the recommended repository layout 


| KES®]E-m EPE) ew ) (i (Bi) 
”图 926 

弹出 Create New Repository 对 话 框 , 版 本 库 各 项 参数 如 图 9-27 所 示 。 单 击 Finish 按钮 完成 创建 ， 

返回 VisualSVN Server 对 话 框 ， 即 可 查看 版 本 库 ， 创 建 版 本 库 过 程 中 会 默认 建立 trunk、branches 和 


图 9-25 


tags 3 个 文件 夹 ， 如 图 9-28 所 示 。 


一 


ry Ceestad Suacesstaly: 
er the created repository details. 
I' 


Es) [ 


图 9-27 


图 9-28 
将 项 目 导 入 版 本 库 中 ， 找 到 安装 的 项 目 文件 来， 选中 文件 夹 ， 单 击 鼠 标 右键 ， 在 快捷 菜 
择 TortoiseSVN > “导入 ”命令 


单 中 选 


命令 ， 如 图 9-29 所 示 。 弹 出 “导入 ”对 话 框 ， 如 图 9-30 所 示 。 


2 E\Repositories\Repository1 - 导入 - TortoiseSVN lm| 到 


百世 括 克 的 文件 


版 本 库 

版 本 库 uRL: 二 RE 全 全 
hi/pc-201705lBsps/ "~ 图 

导入 信息 0) 


回 自用 自动 属性 确定 @) EE 


| 刍 知 识 点 讲解 : 怎样 找到 项 目 文件 夹 的 位 置 ? 

(1) 项 目 文件 夹 的 位 置 就 是 图 9-8 中 设置 的 位 置 。 
| (2) 同时 用 户 也 可 以 选中 Repository1 项 目 ， 单 击 鼠 标 右键 ， 在 弹 i 
| 出 的 快捷 菜单 中 选择 repository 命令 ， 然 后 继续 在 弹出 的 “Properties | 一 
，for/swn/Repository1” 对 话 框 中 选择 details 选项 卡 ， 此 对 话 框 中 记录 es 


| 了 项 目的 详细 信息 ， 包 括 项 目的 存储 路 径 ， 如 图 9-31 所 示 。 es 


返回 VisualSVN Server 对 话 
框 ， 在 版 本 库 上 单 击 鼠 标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 Copy 
URL to Clipboard 命令 ， 如 图 9-32 
所 示 。 

弹出 提示 对 话 框 ， 如 图 9-33 


earnere belt subvatan sepa mman 


] 
ED BEE ED ， 
一 一 一 


所 示 。 单 击 Create User 按钮 ， 弹 
出 Create New User 对 话 框 ， 在 该 
对 话 框 中 设置 名 称 及 密码 ， 如 图 
9-34 所 示 。 


VisualSVN Server 


via web-browser or any Subversion diert you will have to provide a 
Password， 


Would you like to create auser account now? 


A You have no user account configured for VisualSVN Server. To access repositories 


Password: seesssees 


Confrm password: seeeeeeeeeee 


@ user name and password are case sensitive. 


Ee Eg ED 


Ee Gee 


图 9-33 


图 9-34 


再 次 选中 项 目 文件 夹 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 TortoiseSVN > “导入 ”命令 ， 


弹出 “导入 ”对 话 框 ， 输 入 “版 本 库 URL” 和 “导入 信息 ”内 容 ， 如 图 9-35 所 示 。 


二 
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轿 SVN 检 册 (9.. | EE | 
出 TortoiseSVN 上 | 候 、 版 本 库 浏览 露 (R) copy URL to dipboard 
| [ra | “加 
巧 ” 360 点 画 助 手 ， | BY 导出... 

新 建 (W) » | 莉 ”在 此 创建 版 本 库 ) ER 
加 S(O AON 
国 小 IO) RS 
画 个 性 化 (R) 多 ”帮助 (H) ee 
| 加 半 启动 可 性 WE |] [ WA ][ Wh ] 

图 9-35 


单 击 “ 确 定 ” 按 钮 ， 弹 出 “认证 ”对 话 框 ， 在 该 对 话 框 中 输入 前 面 创 建 的 新 用 户 及 密码 ， 如 图 
9-36 所 示 。 单 击 “ 确 定 ” 按 钮 ， 用 户 会 看 到 所 选中 的 项 目 将 导入 版 本 库 中 ， 如 图 9-37 所 示 。 


2 CheeraAdministrator PC-201705185HPS\Desktop - SA ~ TortoiseSyN [= 豆 [owe Wan 0 Hp SX ronciesyN EE 
ee 
所 作 如 人 Bu mexy 二 作品 meE 
mA Ge i mr EEN GheerWannerato PC D1705 00HPS Pedtop ps0rIf ET nk mt 
a 
oo 
ecole 
各 要 用 PP 和 pk 
NR en 
oa 1 
Bo ees 
57 家 和 ,0 Dos i 一 - 
= C= E2] my | 


图 9-36 图 9-37 
项 目 导入 版 本 库 以 后 ， 不 能 随便 让 任何 人 都 能 读 写 版 本 库 ， 所 以 需要 建立 用 户 组 和 用 户 ， 返 
VisualSVN Server 对 话 框 ， 选 择 Users 选项 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 ”> 
User 命令 ， 如 图 9-38 所 示 。 弹 出 Create New User 对 话 框 ， 需 要 再 次 创建 用 户 ， 如 图 9-39 所 示 。 


加 


文件 (明报 作 (A) 二 看 (V】 帮 屿 (H) 
和 中 | 右 辐 | GBB| 日 可 | 名 各 


[CC | 


+ 国 Repositories 


@ user name and password are case sensitive. 


Ce Leone | 


图 9-38 图 9-39 
使 用 相同 的 方法 继续 创建 6 个 用 户 ， 如 图 9-40 所 示 。 选 择 Groups 选项 ， 单 击 鼠标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “新 建 ”> Group 命令 ， 如 图 9-41 所 示 。 


文件 站” 生 作 (A) 下 看 V) 帮 和 (H) 


MA 加 中 | 者 国 | 6 避 | 日 画 | 剖 冲 


在 国 @ 尼 | 四 本 | 画 避 


图 9-40 


6 个 用 户 分 别 代表 3 个 开发 人 员 、2 个 测试 人 员 和 1 个 项 目 经 理 。 


在 弹出 的 对 话 框 中 设置 Group name 为 Developers， 单 击 Add 按钮 ， 在 弹出 的 对 话 框 中 选 


使 用 相同 的 方法 创建 其 他 组 ， 


择 3 个 designer， 加 入 这 个 组 ， 单 击 OK 按钮 ， 如 图 9-42 所 示 。 
如 图 9-43 所 示 。 
Smpnme: Devepers 文件 (FI ” 报 作 (A) ”查看 (V) ”帮助 (H) 
Pr 和 中 | 碳 国 | 巨 | 日 本 | 画 回 
oes 
各 ia 
4 Repositories | 
》 息 Repositoryl epee 
总 ee RMangers 
Ee re BD Jobs Rtesters 
Ce one 
图 9-42 图 9-43 
在 VisualSVN Server 窗口 中 ， 选 择 Repository1 选项 ， 单 击 鼠标 右键 ， 在 快捷 菜单 中 选择 
Properties 命令 , 在 弹出 的 对 话 框 中 , 选择 Security 选项 卡 , 如 图 9-44 所 示 。 在 对 话 框 中 单 击 Add 按钮 ， 
在 弹出 的 对 话 框 中 选择 Developers、Managers 和 testers 3 个 组 ， 如 图 9-45 所 示 。 


图 9-44 图 9-45 
单 击 OK 按钮 ， 添 加 效果 如 图 9-46 所 示 。 将 Developers 和 


Managers 的 权限 设置 为 Read/ 
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完成 以 上 步骤 的 操作 ， 服 务 端 设 置 完成 。 接 下 来 用 客户 端 去 检 出 代码 。 在 桌面 空白 处 单 击 鼠标 
右键 , 在 快捷 菜单 中 选择 “SVN 检 出 ”命令 , 如 图 9-48 所 示 。 在 弹出 的 对 话 框 中 填写 版 本 库 URL ( 具 
体 获 取 方式 在 讲解 上 传 项 目 到 版 本 库 时 讲 过 ) 并 选择 检 出 目录 ， 如 图 9-49 所 示 。 
喜 看 M » 
排序 方式 (O) ’ 
a) 


粘贴 (P) 


图 9-48 图 9-49 
单 击 “ 确 定 ”按钮 ， 开 始 检 出 项 目 ， 如 图 9-50 所 示 。 检 出 完成 之 后 ， 打 开工 作 副本 文件 夹 ( 工 
作 项 目 文件 夹 ) ， 会 看 到 所 有 文件 和 文件 夹 都 有 一 个 绿色 的 对 勾 标 志 ， 如 图 9-51 所 示 。 


图 9-50 图 9-51 


项 目 文件 夹 的 位 置 ， 用户 可 以 参考 图 9-49 上 的 位 置信 息 。 


TortoiseSVN 客户 端 应 用 D 


完成 TortoiseSVN 客户 端 安装 后 ， 用 户 就 可 以 在 客户 端 完成 上 传 文件 、 修 改 文件 等 操作 。 这 些 操 
作 将 可 以 被 多 个 同 级 用 户 看 到 ， 便 于 整个 团队 项 目的 创建 。 


sa 定 建 共享 文件 © 


用 户 如 果 需 要 在 文件 夹 中 新 建 一 个 新 的 共享 文件 ， 则 需要 使 用 SVN 提交 功能 将 文件 上 传 到 指定 
文件 夹 中 。 


实例 37 一 “使 用 Repository1 共享 文档 © 


下 面 继续 学 习 如 何 使 用 Repository1 共享 文档 ， 即 在 工作 文件 夹 中 添加 新 的 共享 
文档 。 


178 


9 产品 原型 的 发 布 与 输出 


到 打开 工作 项 目 文件 夹 ( 绿色 对 勾 文 | 、 源 文件 , 无 


件 夹 ) ， 在 该 文件 中 添加 一 个 readme 文件 》 操 作 视 频 ， 视频 \ 第 9 章 \ 使 用 Repository1 共 享 文档 ,mp4 
夹 ， 用 户 会 发 现 创建 的 readme 文件 夹 显示 ne En 
为 问号 ， 如 图 9-52 所 示 。 在 readme 文件 夹 | S| 
上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
TortoiseSVN > "增加 "命令 , 如 图 9-53 所 示 。 


请 令 ”加 入 
已 增加 C beers onstator Pc-20 70S 1sHPS estep Repestory iYesdne 
| 


图 9-54 图 9-55 
现 ) 返回 工作 项 目 文件 夹 中 选择 readme 文件 来, 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “SVN 
提交 ”命令 ， 输 入 用 户 名 和 密码 ， 单 击 “ 确 证” 按钮 ， 完 成 提交 ， 如 图 9 -56 所 示 。 
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2 修改 共享 文档 © 


除了 新 建 共享 文件 外 , 用 户 还 可 以 对 共享 文件 夹 中 的 任意 文件 进行 修改 , 以 完成 原型 的 创建 任务 。 
实例 38 一 设置 Repository1 共享 文档 © 


上 一 实例 中 用 户 学 习 了 国 
如 何 创 建新 的 共享 文档 , 接 
下 来 帮助 用 户 学 习 如 何 设置 
共享 文档 。 

到 在 工作 项 目 文件 
夹 中 新 建 一 个 come txt 的 共享 文件 ， 如 图 
9-57 所 示 。 打 开 come.txt 文件 ， 在 文本 中 
添加 内 容 ， 如 图 9-58 所 示 。 


* 源 文件 : 无 
操作 视频 ; 视频 第 9 章 \ 设 置 Repository1 


sa 和 
局 sorwass (Dy) 
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下 1 
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站 公 六 到 来， 请 各 部门 员 工 在 候 月 间 叶 门 浪 。 


OO rome nos + Hh opeiont » -| | er 
XI 妨 碟 (5) 查看 IV) 工具 四 相册 (H) 
Cd 司 打开 ” = #0 WE 
Lo ”a mBn = 
ae 201Ma123 1814 
OneDrie Te 
而 cont 
ED 座 由 
司 Siberson hooks 
CE ] 机 ece 
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elcomem 
@) formar 
ld i 
sh 
en SOFTWARE (D) 
a MEDIA (EY 
| neve waa i30102 ER 
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图 9-57 


图 9-58 


玛 将 文件 保存 后 关闭 ， 文 件 的 图 标 变 成 红色 的 感叹 号 ， 如 图 9-59 所 示 。 通 过 提交 更 改 上 传 文 


件 后 ， 感 叹 号 即 可 消失 ， 提 交 修 改 对 话 框 如 图 9-60 所 示 。 


名 称 修改 日 期 关 型 
smn 2018/3/29 18:11 。 文件 夫 
branches 2018/3/29 18:11 。 文件 夫 
而 conf 2018/3/29 18:11 ”文件 夫 
而 db 2018/3/29 18:11 。 文件 志 
大 hooks 2018/3/29 18:11 。 文件 夫 
而 lockes 2018/3/29 18:11 ”文件 夫 
而 readme 2018/3/30 932 ”文件 夫 
硬 tags 2018/3/29 18:11 。 文件 去 
而 tmunk 2018/3/29 18:11 。 文件 夫 
@) cometbd 2018/3/30 10:29 文本 文档 
@] format 2018/3/29 18:11 。 文件 

@) README.txt 2018/3/29 18:11 。 文本 文档 


图 9-59 


| 
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件 图 标 如 图 9-62 所 示 。 


“确定 ”按钮 ，“ 提 交 完成 ”对 话 框 如 图 9-61 所 示 。 更 改 文件 名 为 come on.txt，, 文 


后 个 改革 大 小 
了 sm 2018/3/29 18:11 

六 branches 2018/3/29 18:11 

站 2018/3/23 18:11 

FP 2018/3/29 18:11 

本 hools 2018/3/29 18:11 

locks 2018/3/29 18:11 

readme 2018/3/30 932 

改 wgs 2018/3/29 18:11 

罚 nk 2018/3/29 18:11 。 广 结 直 
Come onbd 2018/3/30 1023 。 文 $ 文 有 
@ format 2018/3/29 18:11 。 文件 

面 READMEba 2018/3/29 18:11 。 文本 文档 


图 9-61 


双 选中 come on bd 文件 , 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 TortoiseSVN > "加 入 " 命令 ， 


如 图 9-63 所 示 。 将 文件 提交 后 ， 单 击 鼠 标 右键 ， 


刷新 ， 效 果 如 图 9-64 所 示 。 


人 mm ene orar FE mal 


es Dm 

Vom nt HEN i mioonam ， 
DD Sha 汪 
图 9-63 


图 9-62 


在 弹出 的 快捷 菜单 中 选择 “刷新 ”命令 ， 将 文件 夹 


ea 修改 6 期 se 大 小 
smn 201813/291811 。 文 # 奖 

太 branches 2018/3/29 18:11 。 文 4 闪 

conf 2018/3/2918:11 。 交 4 实 

六 db 2018/3/29 18:11 。 文中 去 

六 hooks 2018/3/2918:11 。” 文 9 实 

夯 lode 201813/291811 。 文 # 严 

readme 2018/3/30 9:32 文 # 夹 

tags 2018/3/2918:11 。 文 4 夹 

unk 2018/3/29 18:11 。 文件 严 

[come onta 2018/3/30 10.29 。 交 寺 文档 ET 
@ format 2018/3/29 18:11 。 文件 1KB 
加 READMEba 2018/3/29 18:11 。 文本 文档 1 KB 


图 9-64 


三 选择 需要 删除 的 文件 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 TortoiseSVN > “删除 ” 命 
令 ， 如 图 9-65 所 示 。 将 文件 删除 后 ， 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “SVN 提交 ”命令 ， 
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如 图 9-67 所 示 。 可 将 想 要 删除 的 文件 删除 。 


弹出 提示 对 话 框 ， 用 户 可 以 根据 提示 选择 删除 ， 如 图 9-66 所 示 。 


图 9-66 


三 单 击 "确定 " 按钮 后 , 弹出 “认证 ”对 话 框 , 输入 密码 及 用 户 名 后 , 弹出 “提交 完成 ” 对 话 框 ， 
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提交 
CUserswdminstator PC-20170518SHpsWesktopRepostorylrone on bt 


使 用 团队 项 目 p 


一 个 大 的 项 目 通 常 不 是 一 个 人 完成 的 ， 需 要 几 个 甚至 几 十 个 人 共同 来 完成 。 创 建 团队 项 目 可 以 
使 团队 中 的 所 有 用 户 及 时 共享 最 新 信息 ， 全 程 参与 到 项 目的 研发 制作 中 。 


< 创建 团队 项 目 © 


执行 “文件 ” >“ 新 建 ”命令 ， 新 建 一 个 Axure RP 文档。 执行 “团队 ”>“ 从 当前 文件 创建 团队 
项 目 ” 命 令 ， 如 图 9-68 所 示 。 即 可 开始 创建 团队 项 目 。 


DS BS 》 且 画 了 | 
Ed 


人 上 本 -| 过 要 


[Defaut -| By | jw | | Normal ER EDIESIE:| 
wm DA nae 机 而 
4 index Lp 属性 说 明 
近 mm 
pagez2 | Default ~ | 


图 9-68 
用 户 也 可 以 执行 “文件 ”>“ 新 建 团队 项 目 ” 命 令 ， 如 图 9-69 所 示 。 在 弹出 的 “创建 团队 项 目 ” 
对 话 框 中 创建 项 目 ， 如 图 9-70 所 示 。 


国产 建 (N) CN 
篇 ”打开 .-(O) Cul+0 
打开 最 近 编 辑 的 文件 
保存 (S) Ctrl+S 
另存 为 -:(A) Ctrl+Shift+S 
从 RP 文 件 导入 .四 
打开 回 队 项 目 -(G) 
图 9-69 图 9-70 


单 击 “ 创 建 团队 项 目 ” 对 话 框 中 的 SVN 选项 卡 ， 单 击 团队 目录 后 的 按钮 ， 选 择 工作 项 目 文件 来 
位 置 ( 绿色 对 勾 标识 的 文件 夹 ) 。 


第 9 章 ， 网 站 产品 原型 的 发 布 与 输出 | 


在 选择 团队 目录 位 置 时 ,可 以 直接 复制 粘贴 URL 或 SVN 的 地 址 用户 也 可 以 在 工作 项 目 文件 夹 ( 绿色 对 勾 文件 夹 ) 


直接 新 建文 件 ， 将 文件 添加 到 版 本 控制 中 ( 前 面 讲解 的 添加 文件 操作 ) ， 在 选择 团队 目录 时 直接 选择 该 文件 位 置 ， 
创建 团队 项 目 。 


在 "团队 项 目 名 称 "文本 框 中 输入 项 目的 名 称 ,如 图 9-71 所 示 。 在 “团队 目录 "选项 后 单 击 -| 按钮 ， 
选择 本 地 项 目 保存 的 位 置 ， 如 图 9-72 所 示 。 


EE 
符 二 汪 各 

「 国人 项 目 位 年 

民 ss EE a 

| 

| 国 队 目录 : CUserswdministratorPC-20170518SHPSVDesktopIReposioryTE 队 : … 

| 

| 国 队 项 目 名 称 

le 

本 地 目录 

| E\Repository 


图 9-71 


在 给 团队 项 目 命名 时 ， 要 保持 简短 的 项 目 名 称 ， 在 名 称 中 如 果 包 含 多 个 独立 的 单词 ， 要 使 用 连 字符 或 者 首 字母 
大 写 ， 不 要 出 现 空格 ， 因 为 项 目 名 称 会 在 URL 使 用 ， 所 以 要 避免 空格 。 


单 击 “创建 ”按钮 ， 弹 出 创建 进度 窗口 ， 如 图 9-73 所 示 。 当 创建 成 功 后 ， 弹 出 提示 对 话 框 ， 如 
图 9-74 所 示 。 


图 9-73 图 9-74 


团队 目录 选项 是 本 地 项 目 保存 的 位 置 ， 用 户 可 以 将 该 位 置 打开 ， 会 看 到 Axure RP 团队 项 目 创建 了 两 个 内 容 。 


Axure RP 默认 的 保存 格式 是 Axure RP 标准 文件 格式 ， 这 种 格式 在 
同一 时 间 只 能 有 一 个 人 进行 访问 和 编辑 ， 而 Axure RP 团队 项 目 是 为 了 
支持 团队 合作 可 以 多 人 进行 访问 ， 团 队 项 目 文件 格式 为 .rpprig 格式 ， 
文件 图 标 如 图 9-75 所 示 。 
打开 工作 项 目 文件 夹 ( 绿色 对 勾 文件 夹 ) ， 用 户 会 看 到 创建 的 团 
队 项 目 ， 但 是 并 没有 显示 “ 受 控 状态 ”， 如 图 9-76 所 示 。 选 择 该 项 目 ， 
将 文件 添加 到 版 本 控制 的 状态 ( 与 前 面 讲解 的 添加 文件 的 方法 相同 ， 
这 里 不 再 详细 讲解 ) ， 文 件 显示 效果 如 图 9-77 所 示 。 图 9-75 
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图 9-76 图 9-77 
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4 EE 


用 户 如 果 先 在 项 目 文件 夹 ( 绿 色 对 勾 文件 夹 ) 中 新 建文 件 , 并 将 该 文件 添加 到 版 本 控制 状态 , 在 选择 团队 目录 时 ， 
如 果 选 择 的 是 该 新 建文 件 ， 不 用 再 添加 ， 只 需要 更 新 即 可 。 


完成 团队 项 目的 创建 后 ， 需 要 将 共享 目录 的 地 址 告诉 团队 合作 中 的 其 他 成 员 。 同 时 把 SVN 服务 
器 的 用 户 名 和 密码 准备 好 ， 团 队 合作 中 其 他 成 员 在 第 一 次 连接 下 载 时 需要 使 用 。 


< J 开 团 队 项 目 © 


执行 “文件” > "打开 团队 项 目 " 命令, 或 者 在 菜单 中 选择 “团队 ”> “获取 并 打开 团队 项 目 " 选项 ， 
如 图 9-78 所 示 。 选 择 项 目 建成 的 文件 夹 位 置 (绿色 对 勾 标识 的 文件 夹 )， 如 图 9-79 所 示 。 


误 洛 文件 交 过 


选择 存放 团队 项 目的 目录 。 


» 出 MyDrivers 
< 成 myRepository 


图 9-78 图 9-79 


用 户 在 选择 文件 时 会 看 到 在 MY 团队 项 目 文件 夹 有 db、dav 及 conf 子 目录 ， 说 明 在 此 台 计 算 机 上 已 经 获取 过 该 
队 项 目 文件 ， 不 需要 重复 获取 ,直接 执行 “文件 ” >“ 打开” 命令 即 可 打开 项 目 文件 。 


在 团队 目录 选项 中 ， 默 认 位 置 为 CNUserswdministratoA 
DocumentsWAxure\Team Projects， 用 户 可 以 更 改 项 目下 载 后 存 
放 的 位 置 。 单 击 Get 键 ，Axure RP 会 从 服务 器 或 者 网 络 目录 
下 载 项 目 文件 ， 项 目 成 功 获取 后 弹出 如 图 9-80 所 示 的 对 话 框 。 
将 项 目 成 功 获取 后 ， 可 以 进行 编辑 。 

在 团队 项 目 中 编辑 文件 ， 团 队 成 员 要 签 出 所 有 需要 的 内 容 
元 素 。 如 果 其 他 团队 成 员 也 想 要 签 出 同一 部 分 ， 会 提示 成 员 该 
部 分 已 经 被 签 出 。 当 签 出 部 分 完成 设计 后 ， 团 队 成 员 可 以 签 入 图 9-80 


内 容 元 素 ， 同 时 其 他 的 团队 成 员 也 可 以 对 想 要 签 出 的 内 容 元 素 进 行 编辑 设计 。 


使 用 Axure Share Le 


Axure Share 是 用 于 存放 HTML 原型 的 Axure 云 主机 服务 。Axure Share 目前 托管 在 Amazon 网 
络 服务 平台 ， 是 一 个 相当 可 靠 和 安全 的 云 环境 。 用 户 可 以 登录 https;//share.axure.com/ 查看 。 


“车 创建 Axure Share 账号 (@ 


使 用 Axure Share 需要 创建 一 个 账号 。 从 2014 年 5 月 开始 ，Axure Share 就 全 部 免费 。 每 个 账号 
可 以 创建 100 个 项 目 ， 每 个 项 目的 大 小 限制 为 100MB。 

用 户 可 以 执行 “发 布 ” > “登录 Axure 账号 ”命令 , 弹出 “登录 ”对 话 框 ， 如 图 9-81 所 示 。 在 “ 登 
录 ” 对 话 框 中 选择 “创建 账号 ”选项 ， 如 图 9-82 所 示 。 


PE 
代理 设 品 
喜 官 您 来 游 1 
E: 和 ET 
Email 
斌 到 
团 自动 登录 Forgotpassword? 同 自动 司 录 。。 Forgot password? 
厂 我 同意 Anure 冬 款 
Cm 
图 9-81 图 9-82 


用 户 可 以 在 “创建 账号 ”对 话 框 中 创建 账号 ， 也 可 以 登录 https://share.axure.com 在 网 页 中 创建 ， 
如 图 9-83 所 示 。 


> 
axureShare eo [| 


Host, Share, Discuss 


axure 


图 9-83 


:可 上传 原 型 到 Axure Share”@ 


用 户 可 以 将 原型 托管 在 Axure Share 上 并 与 利益 相关 者 分 享 。 使 用 HTML 原型 的 讨论 功能 可 以 
让 利益 相关 者 与 设计 团队 进行 离线 讨论 。 

用 户 可 以 在 Axure 网 站 中 链接 Axure Share， 也 可 以 直接 访问 https://share.axure.com。 如 
图 9-84 所 示 是 Axure Share 登录 页 面 ， 如 图 9-85 所 示 是 登录 后 的 状态 页 面 。 
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axureShare = ey 
qxureShare womssaces 。 jonas SRAWDN 


Host, Share, Discuss All Workspaces 


axure 

图 9-84 图 9-85 

将 原型 文件 存储 于 Axure Share 托管 服务 上 很 简单 ， 需 要 用 户 登 录 账 号 后 进入 登录 界面 ， 单 击 
New Workspace 按钮 ， 如 图 9-86 所 示 ， 弹 出 Create a new workspace 对 话 框 ， 如 图 9-87 所 示 。 


All Workspaces 
Create a new workspace 


Name 
Create | | Cancel 
醒 ww Proeds 


图 9-86 图 9-87 
在 对 话 框 中 输入 项 目 文件 夹 名 称 ， 单 击 Create 按钮 进行 创建 ， 如 图 9-88 所 示 。 选 中 新 建 的 项 
目 文件 夹 ， 可 以 对 该 项 目 文件 夹 进行 上 传 项 目 文件 或 者 编辑 等 操作 ， 如 图 9-89 所 示 。 
可 erre。 om me 


qxureShare aasracas os seme co see 


All Workspoces 


图 9-88 


QxureShare wearsasces 
All Workspaces 


图 9-89 


用 户 可 以 在 网 页 中 直接 创建 项 目 文件 夹 , 也 可 以 将 项 目 上 传 到 Axure Share 中 , 执行 "发布" > "发 


布 到 Axure Share” 命 令 ， 弹 出 “发 布 到 Axure Share” 对 话 框 ， 如 图 9-90 所 示 。 
加 配置 : 可 以 设置 HTML 输出 设置 ， 单 击 “ 编 辑 ” 按 钮 即 可 弹出 “生成 HTML” 对 话 框 ， 用 户 可 
以 对 其 进行 设置 ， 如 图 9-91 所 示 。 


图 9-90 图 9-91 
加 创建 一 个 新 项 目 : 需要 输入 新 项 目的 名 称 、 密 码 及 文件 来 ， 选 择 文件 夹 时 弹出 “登录 ”对 话 框 ， 
需要 读者 登录 Axure Share 账号 。 如 果 读 者 已 经 登录 了 账号 ， 可 以 选择 前 面 一 节 中 创建 的 项 目 文 
件 夹 。 
加 ”替换 现 有 项 目 : 将 新 的 原型 替换 原来 的 原型 ， 但 是 需要 输入 原来 原型 的 项 目 ID。 


发 布 和 查看 原型 p 


当 项 目 完成 后 ， 单 击 工具 栏 中 的 “预览 ”按钮 或 按 F5 键 ， 即 可 在 浏览 器 中 查看 原型 效果 。 用 户 
可 以 选择 浏览 器 和 设置 生成 项 目的 位 置 。 

单 击 工具 栏 上 的 “发 布 ”按钮 ， 在 下 拉 菜 单 中 选择 “生成 HTML 文件 ”命令 ， 如 图 9-92 所 示 。 
弹出 “生成 HTML” 对 话 框 ， 如 图 9-93 所 示 。 


[了 1 
ET be 
Ml 
ae Ee 
>” | 
ws | 
Mesa 
Sra | 
ce | 
a ms 5 痢 | 
预览 选项 ..(O) Ctrl+F5 | 
发布 到 AxShare..(A) F6 | 
</》 生成 HTML 文 件 .(H) 人 F8 a Te | 
在 HTML 文 件 中 重新 生成 当前 页 面 (R) Ctrl+F8 SR 村 | 
二 MIRE 四 
芋 。 生成 Word 说 明 书 .(G) P -一 ee | 
更 多 生成 器 和 配置 文件 (M) CEJICRJ 
图 9-92 图 9-93 


选择 想 要 保存 项 目的 位 置 ， 然 后 再 选择 默认 打开 浏览 器 。Axure RP 8.0 会 自动 识别 当前 系统 中 的 
浏览 器 供用 户 选 择 ， 默 认 选 择 上 E 浏览 器 。 


单 击 “ 确 定 ” 按 钮 ， 在 浏览 器 中 可 以 看 到 生成 的 项 目 原型 。 对 于 IE 浏览 器 ， 每 次 生成 Axure RP 
项 目 并 且 在 浏览 器 中 打开 的 时 候 ， 会 看 到 如 图 9-94 所 示 的 安全 提示 。 
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天 CAUsers\bingbingOL huang\Desktop\jiaocheng 国 [| XP eng i 万 -| 


EECOREOEEURO [> 
空 Wax | 高 小 下 
EUntitled Document [| | 会 -和 目 - 呈 和 归 - mn- 29- INO- @- ” 
力 为 了 有 利于 保护 安全 性 ,Internet Explorer 已 导 制 此 网 页 运行 可 以 访问 计算 机 的 幸 本 或 ActiveX 控件 、 清音 二 这 时 下 取 远 项 .. x 
图 9-94 
在 提示 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “人 允许 阻 | ”允许 阻止 的 内 容 (A).…. 
止 的 内 容 ”命令 即 可 ， 如 图 9-95 所 示 。 有 ? 


为 了 避免 提示 每 次 预览 时 都 出 现 ， 用 户 可 以 在 IE 浏览 器 中 
执行 “工具 ”>“Intemet 选项 ”命令 ， 弹 出 “Intemet 选项 ”对 
话 框 ， 如 图 9-96 所 示 。 5 

在 “高 级 "选项 卡 中 你 选 “允许 活动 内 容 在 我 的 计算 机 上 的 文件 中 运行 *" 复 选 框 , 如 图 9-97 所 示 。 
重启 IE 浏览 器 ， 再 生成 项 目 时 就 不 会 弹出 安全 警告 了 。 


主页 
使 看 要 冯 奸 主页 远 ] 需 卡 ， 请 在 各 地 二 键入 地 址 ) 。 到 户 用 on 丰 缠 到 
上 二 一 器 启用 SwetScreea 而 过 四 
司 局 用 机 DFTY 支持 
DI BME intovs ile 目 | 
扣 赂 流 新 页 | 使 数 认 全 使用 主 自 页 0 | 
汕 史 记 果 Ee 
Se 毕 二 抽 
翌 省 放 运行 来 安 妆 抱 秆 ,即使 痊 名 无 洲 
[本 女 究 信 和 中 窑 之 阐 才 之 姜 科 才 肝 宏 六 潍 需 一 
3 ， 
BLatermt Ixylorer 之 后 和 对 
[Ey 
ee 
和 将 Faternet Flyrer 设置 重 委 力 耿 认 议 置 。 夺 硬 要 司 i 
CE Ca (Wns ee 


CE WA ]| am | 
图 9-96 图 9-97 

无 论 是 在 预览 项 目 文件 时 ， 还 是 生成 项 目 时 ， 用 户 都 会 看 到 如 图 9-98 所 示 的 预览 效果 。 页 面 会 

分 成 两 部 分 ， 左 侧 是 站 点 地 图 ， 右 侧 是 效果 ， 可 以 对 其 进行 设置 。 执 行 “ 发 布 ”> “预览 设置 ”命令 ， 

弹出 “预览 选项 ”对 话 框 ， 如 图 9-99 所 示 。 


EE Ea 
迁 皖 预览 HTML 的 配置 文件 
HTML 1 (default) ”| 王 晤 
Fr 与 人 分 享 ， 站 分 享 ， 站 富足! 打开 
Dn 依 本 记得 在 3010 年 ， 汪 华兴 
Mts 出 版 社 的 编 笛 在 网 络 上 投 到 笔者 - IRE 
ep 十 所 能 怕 笔 的 专栏 文章 玲 理 出 人 回 默认 浏览 器 全 开启 RE 列表 
| 版 。 硬 对 这 样 的 型 讲 、 在 虚 点 必 作 Of9 开 〇 关闭 页 面 列表 
“0 性 下 就 答应 了 最终 先后 出 版 了 谷歌 浏览 器 口 最 小 化 工具 栏 
日 类 《性 会 化 旭 体 芝 杀 大 趋势 》 第 1 上 及 芭 权 
oe i TEN 和 O hn 上 RE 
a 条 是 为 保 如 社 人 化 女体 宵 销 在 沾 国 
Dns 的 发 展 再 献 了 痢 薄 之 力 。 同时 笔者 
位 到 了 许多 区 让 六 间 的 整 大， 还 收 
Oe [Cw] 
图 9-98 图 9-99 
在 “预览 选项 ”对 话 框 中 可 以 设置 预览 时 浏览 器 界面 的 分 布 。 


人 ”默认 浏览 器 : 是 根据 用 户 计算 机 中 设置 的 默认 浏览 器 ， 在 该 默认 浏览 器 中 打开 。 
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加 不 打开 : 当选 择 不 打开 时 ， 在 预览 时 是 不 会 有 浏览 器 打开 查看 效果 的 。 
加 ”IE 浏览 器 : 项 目 文件 在 指定 的 IE 浏览 器 中 打开 。 


@ ”开启 页 面 列表 : 选择 此 选项 ， 预 览 原型 时 将 显示 左 侧 的 页 面 列表 内 容 。 此 选项 为 默认 状态 。 

加 ”关闭 页 面 列表 : 选择 此 选项 ， 预 览 原型 时 将 不 显示 左 侧 的 页 面 列表 ， 只 显示 工具 栏 ， 如 图 9-100 
所 示 。 

日 最 小 化 工具 栏 : 选择 此 选项 ， 预 览 原 型 将 隐藏 工具 栏 和 页 面 列 表 ， 如 图 9-101 所 示 。 单 击 浏览 

器 窗口 左上 角 位 置 ， 即 可 显示 工具 栏 和 页 面 列表 。 


与 人 分 享 ， 越 分 享 ， 越 富足 1 

依 顶 忆 得 在 2010 年 清华 大 学 
出 社 的 扩印 在 网 结 上 闪 到 笔者 、 与 人 分 享 ， 越 分 享 ， 越 富足 ! 
芥 章 也 煌 笔者 的 专栏 文章 闫 更 出 依 稻 记 得 在 2010 年 ， 请 华 大 学 
版 。 面 对 计 榴 江 请 ， 在 训 变 心 作 出 版 社 的 编辑 在 网 络 上 找到 笔者、 
性 下 就 答应 了 。 最 终 先后 出 版 了 希望 能 将 笔者 的 专栏 文章 整理 出 


《社会 化 霸 体 过 销 大 枯 势 》 第 1 版 及 
机。 这 本 令吉 不 是 天守 ， 相册 版 。 面 对 这 样 的 六 请 ， 在 虚荣 心 作 


算是 为 促进 福 会 化 媒体 党 销 在 中 国 
的 发 展 奉 柜 了 裔 草 之 力 ， 同 时 笔者 


《社会 化 媒体 营销 大 欧 势 》 第 1 版 及 


图 9-100 一 图 9-101 
@@。 不 加 载 工具 栏 ; 选择 此 选项 ， 预 览 原型 将 不 显示 工具 栏 和 页 面 列表 。 


9.6 车 使 用 生成 器 5 


在 输出 项 目 文件 之 前 , 首先 要 了 解 生成 器 的 概念 。 所 谓 生成 器 就 是 为 用 户 提供 的 不 同 的 生成 标准 。 
在 Axure RP 8.0 中 一 共有 HTML 生成 器 、Word 生成 器 、CSV 报告 生成 器 和 打印 生成 器 4 种 生成 器 。 
接 下 来 逐一 进行 介绍 。 


se HTML 生成 器 © 


单 击 工具 栏 中 的 “发 布 ”按钮 ， 在 下 拉 菜 单 中 选择 “生成 HTML 文件 ”命令 ， 如 图 9-102 所 示 ， 
弹出 “生成 HTML ”对 话 框 ， 如 图 9-103 所 示 。 
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在 “生成 HTML ”对 话 框 中 可 以 配置 默认 HTML 生成 器 的 选项 。 可 以 创建 多 个 HTML 生成 器 ， 
在 大 型 项 目 中 可 以 将 图 形 切 分 成 多 个 部 分 输出 ， 以 加 快 生成 的 速度 。 生 成 之 后 可 以 在 Web 浏览 器 中 
查看 。 


户 也 可 以 执行 “发 布 ”> “更 多 生成 器 和 配置 文件 ”命令 ， 弹 出 “管理 配置 文件 ”对 话 框 ， 如 
图 9-104 所 示 。 双 击 “HTML1(default” 选 项 ， 弹 出 “生成 HTML” 对 话 框 ， 如 图 9-105 所 示 。 在 
该 对 话 框 中 完成 更 多 设置 。 


图 9-104 图 9-105 

对 话 框 中 各 项 参数 解释 如 下 。 

加 ”常规 选择 "常规 "选项 , 可 以 设置 存放 HTML 文 件 的 位 置 , 单 击 如 图 9-106 所 示 的 按钮 , 弹出 " 浏 
览 文件 夹 ”对 话 框 ， 可 以 设置 文件 保存 的 位 置 ， 如 图 9-107 所 示 。 


bl 
区 日 全 交 伯 雪 
tap | es | 
a 
图 9-106 图 9-107 


加 页面: 选择 “页 面 ”选项 ， 可 以 选择 单独 的 页 面 ， 默认 情 况 下 ， 是 生成 所 有 页 面 的 ， 如 图 9-108 
所 示 。 取 消 勾 选 “ 生 成 所 有 页 面 ” 复 选 框 ， 可 以 任意 选择 要 生成 的 页 面 ， 如 图 9-109 所 示 。 
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[3 国 D 扩 
Da ED ms 
Das Er 
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DD a 
图 9-108 图 9-109 


针对 页 面 过 多 的 情况 ， 在 项 目 文件 中 还 提供 了 全 部 选中 、 全 部 取消 、 选 中 全 部 子 页 面 及 取消 全 

部 子 页 面 4 个 按钮 ， 如 图 9-110 所 示 。 ] 

加 页 面 说 明 : Axure RP 8.0 提供 了 一 个 简单 的 页 面 说 明 字 段 名 称 
Default， 可 以 对 页 面 说 明 重 命名 ， 也 可 以 添加 其 他 的 页 面 说 明 ， 让 
HTML 文档 的 页 面 说 明 更 具有 结构 化 ， 如 图 9-111 所 示 。 

@ 元件 说 明 : 在 页 面 编辑 区 中 的 每 个 元 件 都 有 它 存在 的 理由 ， 开 发 者 
会 将 每 个 元 件 转换 为 代码 ， 如 图 9-112 所 示 。 


| re T wa 
| < 
| 
| saa 
es 
| 
图 9-111 
@ 交互: 指定 用 例 交互 行为 ， 如 图 9-113 所 示 。 
和 @ 标志 : 可 以 导入 标志 并 设置 标题 ， 如 图 9-114 所 示 。 


[交互 
必 包含 调试 
用 全 为 
她 终 显示 用 供 名 称 sm 
加 只 在 同一 事件 包含 多 个 用 例 时 显示 用 全 匀称 
从 不 显示 用 供 名 称 ( 使 用 蓝 个 用 例 ) 
元 件 引用 页 
辐 点 击 元 件 时 打开 引用 页 
同 在 新 窗口 中 显示 打开 3 引用 页 的 图 标 


图 9-113 图 9-114 
回 ”Web 字体 : 在 Axure RP 8.0 中 默认 字体 是 Arial 字体 ， 可 以 通过 元 件 样式 编辑 器 修改 元 件 的 默认 
字体 。 这 里 的 Web 字体 ， 也 就 是 可 以 查看 项 目 文件 中 哪里 应 用 了 Web 字体 ， 如 图 9-115 所 示 。 
加 ”字体 映射 : 创建 一 种 新 的 字体 映射 关系 ， 如 图 9-116 所 示 。 


Web 字 体 


地 体 革 对 
辐 包 念 Web 字体 本 其 
二 3 Css 本 性 
人 一 Mial 
字 蒜 Arnal -tonHamily 
名 称 : [Web Fort1 巳 者 万 寺 二 证 字 人 
全 链接 到 css 文件 品 @fontface E> Tont-weight 
图 9-115 图 9-116 
加 移动 设备 ， 当 输出 原型 是 应 用 到 移动 设备 时 ， 可 以 设置 适 配 移动 设备 的 特殊 原型 ， 如 图 9-117 


所 示 。 
自 高 级 : 可 以 设置 项 目 文件 输出 时 字体 的 大 小 及 页 面 的 草图 效果 ， 如 图 9-118 所 示 。 
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图 9-117 图 9-118 
自 讨论 : 可 以 让 访问 者 在 浏览 时 创建 说 
明和 恢复 其 他 访问 者 的 说 明 。 用 户 需 
要 有 自己 的 ID 对 说 明 进 行 管理 及 保 nal Are eon 
护 ， 如 图 9-119 所 示 。 A 


项 目 ID( 乡 填 ) 


图 9-119 


提示 


对 于 响应 式 的 Web 项 目 文件 ，HTML 原型 是 最 好 的 展示 方式 。 
VVYord 生成 器 Dj 


用 户 可 以 使 用 Word 生成 器 将 原型 文件 输出 为 Word 文件 。Axure RP 默认 对 Word 2007 支持 得 
比较 好 , 并 自 带 Office 兼容 包 , 生成 的 文件 扩展 名 是 .docx。 如 果 需 要 低 版 本 的 Word, 则 需要 转换 一 下 。 

双击 “管理 配置 文件 ”对 话 框 中 的 “Word Doc1 ( default ) " 选项 , 弹出 “生成 Word 说 明 书 ( Word 
Doc 1 ) ”对 话 框 ， 如 图 9-120 所 示 。 


国 weissword Doc 1) 本 | 
ba 
至 观 
| 一 目 上 文件 

ht dc 
页 西 时 性 A 中 
人 
元 
寿司 
worq 要 号 


9-120 


OO 


加” 母 版 : 可 以 选择 需要 出 现在 Word 
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对 话 框 中 各 项 参数 解释 如 下 。 

常规 : 设置 项 目 文件 保存 的 位 置 ， 调 整 Web 浏览 时 的 页 面 效果 。 

页 面 : 和 HTML 生成 器 中 的 页 面 说 明 一 样 ， 可 以 让 页 面 更 具有 结构 化 ， 如 图 9-121 所 示 。 
可 以 选择 是 否 输出 包含 标题 部 分 。 


= 


文档 中 的 母 版 及 形式 ， 如 图 9-122 所 示 。 


RE 
不 2 本 有 开明 


图 9-121 图 9-122 


加 页 面 属性 : 在 页 面 属性 中 ， 可 以 选择 生成 时 需要 包含 的 页 面 ， 提 供 了 多 种 丰富 的 选项 和 配置 页 


面 信息 ， 这 些 配置 可 以 应 用 于 Axure RP 文件 页 面 管理 面板 中 所 有 的 页 面 ， 如 图 9-123 所 示 。 


加 屏幕 快照 : Axure RP 8.0 生成 Word 文档 功能 的 一 项 特别 节省 时 间 的 方式 就 是 自动 生成 所 有 页 面 


的 屏幕 快照 。 也 就 是 说 生成 文档 时 ， 所 有 页 面 的 屏幕 快照 都 会 自动 更 新 ， 还 可 以 同时 创建 编号 
脚注 ， 如 图 9-124 所 示 。 


图 9-123 图 9-124 


四 元件 表 : 该 选项 提供 了 多 种 选项 配置 功能 ， 可 以 对 Word 文档 中 包含 的 元 件 说 明 信 息 进行 管理 ， 


OO 


如 图 9-125 所 示 。 

布局 : 布局 设置 ， 如 图 9-126 所 示 ， 可 以 提供 对 Word 文档 页 面 布局 的 可 选择 性 。 

Word 模板 : Axure RP 会 使 用 一 个 Word 模板 ， 基 于 前 面 各 个 选项 的 设置 ， 将 所 有 内 容 组 织 起 来 。 
在 Word 模板 中 可 以 导入 模板 ， 还 可 以 创建 模板 ， 如 图 9-127 所 示 。 
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CSV 报告 生成 器 © 

CSV 是 一 种 通用 的 、 相 对 简单 的 文件 格式 ， 被 商业 和 科学 领域 用 户 广泛 应 用 。 最 广泛 的 应 用 是 

在 程序 之 间 转 移 表格 数据 ， 而 这 些 程序 本 身 是 在 不 羔 容 的 格式 上 进行 操作 的 ( 往往 是 私有 的 和 无 规 
范 的 格式 ) 。 因 为 大 量程 序 都 支持 某 种 CSV 变 体 ， 至 少 是 作为 一 种 可 选择 的 输入 /输出 格式 。 

项 目 文件 以 纯 文本 形式 存储 表格 数据 ( 数字 和 文本 ) 。 文 本 意味 着 该 文件 是 一 个 字符 序列 ， 不 

含 必须 像 二 进 制 数字 那样 被 解读 的 数据 。 CSV 文 件 由 任意 数目 的 记录 组 成, 记录 间 以 某 种 换行 符 分 隔 

有 


每 条 记录 由 字段 组 成 ， 字 段 间 的 分 隔 符 是 其 他 字符 或 字符 串 ， 最 常见 的 是 喜 号 或 制 表 符 。 通 常 ， 所 
有 记录 都 有 完全 相 器 的 字段 序列 。 了 闫 CRom cov repors (Cov rope DL 
双击 “管理 配置 文件 ”对 话 框 中 的 “CSV Report 1” 加 mm 
选项 , 弹出 “生成 Configure CSV Reports( CSVReport1)” | 区。 
对 话 框 ， 如 图 9-128 所 示 。 | | 
该 对 话 框 中 各 项 参数 解释 如 下 。 


加 ”常规 ; 分 别 设置 页 面 报告 和 控件 报告 保存 的 位 置 ， | 

如 图 9-129 所 示 。 
回 页面 : 和 前 面 介 绍 的 生成 器 中 的 页 面 说 明 一 样 ， 用 

户 可 以 选择 要 生成 的 页 面 。 图 9-128 
日 母 版 : 可 以 寺 择 需要 在 CSV 报告 中 出 现 的 懂 ， 如 图 9-130 所 示 。 


图 9-129 图 9-130 
回 ”页 面 说 明 : 可 以 选择 需要 在 CSV 报告 中 出 现 的 页 面 说 明 ， 如 图 9-131 所 示 。 
自 元 件 说 明 : 可 以 选择 需要 在 CSV 报告 中 出 现 的 元 件 说 明 ， 如 图 9-132 所 示 。 
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图 9-131 图 9-132 


£3 
CsvV 文件 格式 的 通用 标准 并 不 存在 ， 但 是 在 RFC 4180 中 有 基础 性 的 描述 。 使 用 的 字符 编码 同样 没有 被 指定 。 


打印 生成 器 © 


打印 生成 器 是 Axure RP 8.0 中 新 增加 的 生成 器 ， 是 指 如 果 需 要 定期 打印 不 同 的 页 面 或 母 版 ， 可 


以 创建 不 同 的 打印 配置 项 ， 这 样 就 不 需要 每 次 。 | 下 erm = 
都 重新 去 配置 打印 属性 。 i 

在 打印 时 ， 可 以 配置 想 打印 页 面 的 比例 ， | Eee 
无 论 是 只 有 几 页 或 文件 的 一 整 节 ， 打 印 一 组 模 | 2 所 
板 也 变 得 非常 简单 。 如 果 正 在 从 Axure RP 文 = | 
件 中 打印 多 个 页 面 ， 不 必 频 繁 地 重复 调整 打印 玉 | 
设置 ， 可 以 为 每 个 需要 打印 的 页 面 创建 单独 的 ry | 
打印 配置 。 RR 与 设 二 | 

双击 “管理 配置 文件 ”对 话 框 中 的 “打印 sar Moarm 
生成 器 ”选项 ， 弹 出 “打印 (Print 1)” 对 话 框 ， 2 ope emt 
如 图 9-133 所 示 。 sse | 
加 ”缩放 : 可 以 用 来 设置 缩放 图 标 为 纸张 大 小 、 

全 尺寸 、 缩 放 、 按 宽度 适 配 及 按 页 面 适 配 面 | 广 而 一 而 

几 种 规格 。 图 9.133 


加 页面 : 选 定 需要 打印 的 页 面 进行 打印 ， 如 图 9-134 所 示 。 
加 母 版 : 选 定 需要 打印 的 母 版 进行 打印 ， 如 图 9-135 所 示 。 


和 Ppa 


二 E23 bE 


ee 
图 9-134 9-135 


第 @ 剖 商业 性 综合 案例 p 


通过 前 面 章 


的 产品 原型 ， 
这 样 就 可 以 方便 


节 的 用 户 应 该 已 经 掌握 了 Axure 
解 Axure RP 功能 的 同时 ， 


用 户 


RP 的 基本 使 用 在 本 章 中 将 通过 制作 网 站 
也 帮助 用 户 熟 9 工作 流程 和 制作 规范 ， 


网 站 登录 界面 案例 5 


在 这 一 节 中 


和 


口 


在 本 案例 中 


， 将 制作 一 款 


到 一 个 新 的 页 面 ， 


到 图 标 或 按钮 上 ， 图 标 台 


网 站 登录 页 面 的 原型 设计 。 这 款 页 面包 含 的 内 容 比 较 少 ， 用 到 的 元 件 
事件 也 不 算 复杂 ， 交 互 效果 也 比较 简单 ， 所 以 制作 起 来 并 没有 太 大 的 难度 。 


由 有 案例 分 析 


， 将 光标 移动 


或 按钮 的 颜色 会 发 生变 化 。 单 击 按钮 ， 将 链接 


显示 页 面 内 容 ， 并 且 页 面 之 间 可 以 相互 跳 转 。 


这 款 页 面 采 


局 部 位 置 点 级 同色 系 的 绿色 、 蓝 色 和 红色 。 


同时 使 


浏览 者 对 信息 的 


放 收 。 


让 人 冷静 的 蓝 色 和 给 人 以 新 鲜 感 的 绿色 作为 主 色调 ， 为 了 强调 页 面 的 轻松 感 ， 在 


色 作 为 登录 框 的 背景 颜色 ， 可 以 使 浏览 者 清楚 地 看 到 登录 框 的 结构 与 信息 ， 方 便 了 


从 总 体 效 果 来 看 ， 这 款 设计 网 站 的 登录 页 面 既 有 设计 类 网 站 的 严谨 和 时 尚 , 又 兼顾 了 购物 网 站 


的 活泼 。 


主 色调 


点 缀 色 


从 大 体 上 来 看 ， 登 录 页 面 内 容 结构 简单 ， 大 面积 
这 样 对 于 浏览 者 来 说 , 既 可 以 很 好 地 接受 网 页 提供 的 信息 , 又 能 快速 地 找到 自己 想 要 的 信息 加 以 操作 ， 
如 图 10-1 所 示 。 


的 蓝 色 背景 色 下 白色 的 登录 框 显得 清楚 别致 


任何 网 站 的 登录 页 面 都 不 宜 设置 得 过 于 花哨 ,同时 交互 效果 也 不 宜 设置 得 过 于 繁杂 ,容易 引起 浏览 者 的 逆反 心理 ， 
从 而 放弃 对 网 站 的 浏览 。 


实例 39 一 一 制作 按钮 的 不 同 状态 


优秀 的 原型 设计 不 仅 能 够 从 
外 观 上 给 浏览 者 留 下 深刻 的 印象 ， 
还 能 使 浏览 者 通过 交互 效果 全 面 、 


* 源 文件 ， 素 材 &% 源 文件 第 10 章 \ 网 站 登录 界面 .p 
* 操作 视频 : 视频 * 第 10 章 \ 按 钮 的 不 同 状态 .mp4 


快速 地 了 解 相关 的 页 面 信息 。 下 
加 打开 Axure RP 软 件 ， 新 村。 
建 index 文档 。 在 “样式 ”选项 卡 中 设置 背景 颜色 
为 #1980FF, 使 用 "矩形 1" 元 件 在 工作 区 添加 控件 ， 
乱 有 的 各 项 参数 如 图 10-2 所 示 。 QO@® 
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三 继续 使 用 “矩形 1” 元 件 在 工作 区 添加 控件 ， 更 改 “ 登 录 ” 矩形 的 边框 可 见 性 和 边框 填充 颜 
色 为 #00CC00， 其 他 参数 如 图 10-3 所 示 。 


ER 
em 习 国 Q 
5 


2 D macx 
D pager 
D rage? 


图 10-3 
三 使 用 图 片 元 件 在 工作 区 添加 控件 ， 并 且 使 用 相同 方法 完成 相似 的 操作 ， 如 图 10-4 所 示 。 分 
别 为 图 标 命名 为 “QO 图 标 ”“ 微 信 图 标 ” 和“ 微 博 图 标 ”， 如 图 10-5 所 示 。 


a | 
人 雪 | 


图 10-4 图 10-5 
观 选 中 “QQ 图 标 " 元件， 在 “属性 ”选项 卡 中 单 击 “ 鼠 标 悬 停 ” 选 项 ， 弹 出 “交互 样式 设置 " 
对 话 框 ， 设 置 参数 如 图 10-6 所 示 。 设 置 完成 后 ，“ 属 性 ”选项 卡 如 图 10-7 所 示 ， 并 且 使 用 相同 方 
法 为 “ 微 信 图 标 ” 和 “ 微 博 图 标 ”设置 交互 样式 。 
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图 10-6 图 10-7 


三 使 用 文本 标签 元 件 在 工作 区 添加 控件 ， 并 且 使 用 相同 方法 完成 相似 的 操作 ， 具 体 参数 如 
图 10-8 所 示 。 


图 10-8 


大 使 用 各 种 元 件 在 工作 区 内 添加 控件 ， 完 成 页 面 的 绘制 ， 如 图 10-9 所 示 。 单 击 “ 预 览 " 按钮 ， 
在 浏览 器 中 查看 交互 效果 ， 如 图 10-10 所 示 。 
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10-9 ! 图 10-10 
实例 40 一 切换 不 同 的 登录 页 面 [@) 


使 用 Axure RP 设计 加 3em 
和 制作 原型 设计 ， 最 重要 这 

的 一 个 原因 就 是 Axure RP 
可 以 设置 丰富 的 交互 效 
果 ， 减轻 了 设计 师 在 测验 
阶段 的 反复 修改 等 劳 心 劳力 的 工作 。 


* 源 文件 ， 素 材 & 源 文件 第 10 章 \ 网 站 登录 界面 .p 
* 操 作 视 频 : 视频 第 10 章 \ 切 换 不 同 的 登录 页 面 .mp4 
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珊 回 到 index 页 面 ， 选中 “手机 验证 码 登录 ”元 件 ， 在 “属性 ”选项 卡 中 ， 单 击 “ 创 建 连 接 " 
选项 ， 选 择 “page1” 页 面 ， 如 图 10-11 所 示 。 在 “page1” 页 面 中 ， 根 据 前 面 讲解 过 的 操作 步骤 ， 
制作 页 面 的 部 分 内 容 ， 如 图 10-12 所 示 。 
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pm" 
10-11 图 10-12 
玛 使 用 水 平 线 元 件 和 文本 标签 元 件 在 工作 区 添加 控件 ， 如 图 10-13 所 示 。 继 续 使 用 矩形 元 件 
在 工作 区 添加 控件 ， 如 图 10-14 所 示 。 


图 10-13 图 10-14 


了 使 用 图 片 元 件 和 图 标 元 件 在 工作 区 添加 控件 ， 如 图 10-15 所 示 。 继 续 使 用 主要 按钮 元 件 在 
工作 区 添加 控件 ， 如 图 10-16 所 示 。 


图 10-15 | 图 10-16 
吏 在 “样式 " 选项 卡 中 设置 “填充 类 型 ” 为 “渐变 ”， 具体 参数 如 图 10-17 所 示 。 在 “属性 ” 
选项 卡 中 ， 单 击 “ 鼠 标 悬 停 ” 按 钮 ， 在 弹出 的 “交互 样式 设置 ”对 话 框 中 ， 设 置 渐变 填充 样式 ， 如 
图 10-18 所 示 。 
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图 10-17 图 10-18 


了 单 击 “ 预 览 " 按钮 ， 在 浏览 器 中 查看 交互 效果 ， 单 击 “ 手 机 验证 码 登 录 ” 时 页 面 进行 跳 转 ， 
如 图 10-19 所 示 。 


QO 梧 录 竹 信 到 录 微 博 登 录 


| 时 Se 
图 匀 运 代表 你 同意 《注册 声明 》 《版 权 声 明 》 


该 例 中 ， 在 主页 面 中 为 文 
字 按 钮 添加 了 链接 到 新 页 面 的 
动作 ， 并 且 登 录 按钮 实现 了 鼠 
标 指针 移入 时 显示 不 同 状态 的 
效果 。 

名 器 到 index 页 面 , 选中 “账号 密码 登录 " 
元 件 ， 在 “属性 ”选项 卡 中 ， 单 击 “ 创 建 连接 " 
选项 , 选择 “page2” 页 面 ,如 图 10-20 所 示 。 


* 源 文件 : 素材 &% 源 文件 第 10 章 \ 网 站 登录 界面 .p 
>> 操作 视频 :视频 第 10 章 按钮 的 不 同 状态 2.mp4 
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国生 运 代表 你 同意 (注册 声明 》 《不 权 声明 》 
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三 进入 “page2” 页面 ， 根 据 前 面 的 操作 步骤 制作 页 面 ， 如 图 10-21 所 示 。 继 续 使 用 和 矩形 元 件 
和 文本 标签 元 件 在 工具 区 添加 控件 ， 完 成 页 面 的 绘制 ， 如 图 10-22 所 示 。 
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图 10-21 


图 10-22 


了 单 击 "预览 ”按钮 ， 在 浏览 器 中 查看 交互 效果 ， 单 击 “ 账 号 密码 登录 ”时 页 面 进行 跳 转 ， 


如 图 10-23 所 示 。 


10-23 


购物 网 站 的 原型 设计 包含 商品 价格 排序 和 商品 按 需 筛选 的 交互 效果 ， 用 户 可 以 从 这 两 个 交互 效 
果 中 大 致 了 解 购物 网 站 的 一 些 交 互 事件 ， 从 而 对 今后 在 设计 购物 网 站 的 原型 时 有 所 帮助 。 


第 10 章 “商业 性 综合 案例 
[9 和 案例 分 析 © 


在 复 选 框 案 例 中 ， 当 鼠标 指针 进入 复 选 框 或 者 选项 文本 时 ， 复 选 框 呈现 另 一 种 颜色 ， 离 开 时 恢 
复原 色 ， 鼠 标 单 击 复 选 框 或 者 选项 文本 时 ， 复 选 框 再 切换 选中 样式 。 

在 价格 排序 案例 中 , 单 击 某 个 商品 的 “价格 排序 ”按钮 时 , 按钮 右 侧 滑 出 对 比 栏 , 选中 其 中 一 项 ， 
商品 根据 选项 内 容 进 行 价格 排序 。 

在 商品 筛选 案例 中 , 中 继 器 在 每 项 数据 加 载 时 , 可 以 通过 对 列 值 进行 判断 从 而 对 元 件 进行 控制 。 所 
以 , 如 果 想 限制 “ 簿 选 " 按钮 被 单 击 时 , 不 会 重复 添加 数据 , 我 们 可 以 单独 在 中 继 器 数据 集中 添加 一 列 ， 
用 于 记录 选中 的 状态 ( 见 元 件 准备 ) ;然后 通过 对 这 个 状态 值 的 判断 ， 显 示 商 品 是 否 符合 条 件 。 


TD 色彩 人 析 人 @ 


这 款 页 面 采用 温暖 青春 的 玫 红 色 作 为 主 色调 ,为 了 强调 页 面 的 轻松 感 ， 在 局 部 位 置 点 级 深 红色 、 
灰色 和 浅 蓝 色 。 从 总 体 效果 来 看 ， 这 款 页 面 既 有 购物 网 站 的 热情 ， 又 兼顾 女性 网 站 的 浪漫 。 


本 案例 模拟 大 型 购物 网 站 的 设计 风格 来 制作 产品 原型 ， 其 中 最 重要 的 还 是 交互 效果 的 实现 。 案 
例 效 果 其 中 一 项 是 当 鼠 标 指 针 移入 “价格 排序 ”按钮 ， 显 示 选 项 列表 。 选 项 在 鼠标 指针 进入 时 显示 
粉色 文字 ， 单 击 选项 ， 商 品 列 表 进行 相应 的 排序 。 原 型 设计 的 线 框图 如 图 10-24 所 示 。 
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实例 和 2 一 一 自 定义 复 选 框 


下 面 开始 制作 自 定义 复 选 框 ， 用 户 可 以 根据 自己 的 喜好 或 者 客户 的 爱好 进行 复 
选 框 的 制作 。 同 时 这 个 案例 会 作为 其 他 案例 的 素材 ， 所 以 用 户 需要 对 整个 大 案例 进 
行 预习 工作 ， 方 便 用 户 接 下 来 其 他 步骤 的 制作 。 
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* 源 文件 ， 素 材 & 源 文件 第 10 章 \ 自 定义 复 选 框 "p 
操作 视频 :视频 \ 第 10 章 \ 自 定义 复 选 框 mp4 


口 [] 疯 王 量 期 6 办 择优 而 选 “【_] 店铺 优惠 [| 秋冬 新 款 


到 打开 “元 件 库 ” 面 板 ， 单 击 “ 选 项 ”按钮 ， 在 弹出 的 下 拉 列 表 中 选择 “ 载 入 元 件 库 ” 选 项 ， 


在 弹出 的 对 话 框 中 选择 如 图 10-25 所 示 的 选项 。 在 面板 中 搜索 选择 “对 号 ”元 件 ， 如 图 10-26 所 示 。 
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到 将 对 号 元 件 拖 入 工作 区 内 ， 在 “样式 ”选项 卡 中 修改 元 件 的 各 个 参数 ， 如 图 10-27 所 示 。 


继续 使 用 文本 标签 元 件 在 工作 区 添加 控件 ， 如 图 10-28 所 示 。 
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图 10-27 图 10-28 


三 使 用 相同 的 方法 制作 矩形 并 命名 为 BelowShape， 如 图 10-29 所 示 。 选 中 AboveShare 元 件 ， 
在 “属性 ”选项 卡 中 设置 “选中 ”的 交互 样式 ， 如 图 10-30 所 示 。 


Y 形状 


选择 形状 了 
交互 样式 设置 
上 重 标 县 停 
民生 标 控 下 


疯狂 星期 6 


国 
画 aa 

加 禁用 
区 选中 
图 10-29 10-30 


ES 


观 选中 BelowShape 元 件 ， 在 “属性 ”选项 卡 中 为 元 件 添加 “鼠标 移入 时 ”事件 ， 在 弹出 的 
对 话 框 中 选择 “显示 ”动作 ， 设 置 参数 如 图 10-31 所 示 。 
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图 10-31 


码 参考 上 一 步 为 文本 元 件 添加 同样 的 交互 ， 如 图 10-32 所 示 。 选 中 AboveShare 元 件 , 在 “ 属 
性 ”选项 卡 中 为 元 件 添加 “鼠标 单 击 时 ”事件 ， 如 图 10-33 所 示 。 
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图 10-32 图 10-33 
码 移动 AboveShare 元 件 至 BelowShape 元 件 上 方 ， 如 图 10-34 所 示 。 使 用 相同 方法 完成 相似 


内 容 的 操作 ， 如 图 10-35 所 示 。 
-四 
疯狂 星期 6 


图 10-34 
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图 10-35 


玛 在 第 一 个 选项 的 文字 部 分 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 图 片 ” 命 
令 ， 然 后 双击 转换 后 的 图 片 元 件 导 入 素材 图 片 ， 将 图 片 的 宽 、 高 分 别 设置 为 136、22， 如 图 10-36 
所 示 。 
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图 10-36 
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如 果 浏 览 器 中 不 显示 交互 效果 ,用 户 可 以 将 上 方 的 矩形 元 件 隐藏 ， 再 进行 预览 命令 。 
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实例 43 一 一 商品 价格 排序 


接 下 来 将 模拟 实现 购物 网 站 中 的 价格 排序 效果 。 这 种 交互 效果 还 可 以 具体 设 
置 为 升序 排列 或 者 降序 排列 ， 也 就 是 可 以 实现 从 高 到 低 和 从 低 到 高 两 种 排列 方式 ， 
方便 用 户 对 原型 设计 的 调整 和 修改 。 


* 源 文件 ， 素 材 &% 源 文件 第 10 章 \ 商 品 价格 排序 .p 
> 操作 视频 : 视频 \ 第 10 章 \ 商 品 价格 排序 .mp4 
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了 使 用 中 继 器 元 件 在 工作 区 添加 控件 ， 将 其 命名 为 st， 如 图 10-37 所 示 。 双 击 中 继 器 元 件 进 
入 编辑 状态 ， 在 “样式 ”选项 卡 中 设置 各 项 参数 如 图 10-38 所 示 。 
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了 使 用 图 片 元 件 和 文本 标签 元 件 在 工作 区 添加 控件 ， 在 “样式 ”选项 卡 中 设置 各 项 参数 ， 妇 
10-39 所 示 。“ 关 ”和 “销量 ”元 件 为 单独 元 件 ， 不 与 数字 元 件 处 于 同一 文本 标签 元 件 内 。 
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图 10-39 


了 加 到 index 页 面 内 ， 在 “属性 ”选项 卡 中 设置 中 继 器 的 各 项 参数 ， 共 20 行 4 列 。4 列 从 左 
到 右 分 别 对 应 价格 、 销 量 、 商 品名 称 和 图 片 路 径 ， 如 图 10-40 所 示 。 
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图 10-40 


三 继续 在 “样式 " 选项 卡 中 设置 中 继 器 的 布局 和 间距 ， 各 项 参数 如 图 10-41 所 示 。 为 中 继 器 的 
“每 项 加 载 时 ”事件 添加 “Case1”， 设 置 价格 、 销 量 和 商品 名 称 与 工作 区 的 元 件 相 关联 ， 如 图 
10-42 所 示 。 


图 10-41 图 10-42 
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了 继续 设置 图 片 动作 与 工作 区 的 元 件 相关 联 ， 如 图 10-43 所 示 。 单 击 “ 确 定 ”按钮 ， 工 作 
原型 效果 如 图 10-44 所 示 。 


图 10-43 
了 使 用 矩形 元 件 、 文 本 框 元 件 . 单 角 符 -下 元 件 和 提交 按钮 在 工作 区 添加 控件 ,如 图 10-45 所 示 。 
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图 10-45 
0 使 用 动态 面板 元 件 为 工作 区 添加 控件 ， 如 图 10-46 所 示 。 双 击 动态 面板 ， 弹 出 “面板 状态 
管理 ”对 话 框 ， 再 次 双击 “State1”， 进 入 编辑 状态 ， 使 用 “和 矩形 1” 元 件 和 文本 标签 元 件 添加 控件 ， 
如 图 10-47 所 示 。 
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图 10-46 图 10-47 


器 到 index 页 面 ， 选 择 动态 面板 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 设 为 隐藏 " 
命令 ， 如 图 10-48 所 示 。 

天 为 “价格 排序 " 按钮 的 “鼠标 移入 时 ”事件 添加 “Case1”, 设置 可 见 性 为 “显示 ”并 勾 选 “ 动 
态 面 板 ” 复 选 框 ， 在 设置 的 更 多 选项 中 选择 “弹出 效果 ”。 设置 为 “弹出 效果 ”后 ， 如 图 10-49 所 示 。 


图 10-48 


设置 为 “弹出 效果 ”后 ， 在 浏览 器 中 查看 交互 效果 时 ， 显 示 出 来 的 动态 面板 就 会 在 光标 移出 时 自动 隐藏 ， 而 无 
需 再 添加 交互 。 


图 


10-51 所 示 。 
检视 : 算 形 
1 (类 WV 从 移 


四 


图 10-50 


于 继续 添加 “隐藏 " 动作 ， 各 项 参数 如 图 10-52 所 示 。 使 用 相同 
10-53 所 示 。 


元 件 的 交互 操作 ， 如 图 


PE 


图 10-52 
天 设置 完成 后 ， 单 击 “ 预 览 ”按钮 


10-54 所 示 。 


范 在 “属性 ”选项 卡 中 为 “价格 从 低 到 高 ”元 件 设置 “鼠标 悬 停 ” 的 交互 样式 ， 设 置 文字 颜 
10-50 所 示 。 并 为 其 “鼠标 单 击 时 ”事件 添加 “ 


添加 排序 ”动作 ， 配 置 动 作 中 的 各 项 参数 ， 


图 10-51 


图 10-53 
1， 在 浏览 器 中 查看 原型 设计 的 各 种 交互 设置 是 否 可 行 ， 如 
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实例 44 一 一 商品 新 款 筛选 © 
4 


为 原型 设计 添加 完 按 价 格 排 序 的 交互 效果 后 ， 接 下 来 为 原型 设计 添加 按 需 求 
筛选 商品 的 交互 效果 。 


* 源 文件 ， 素材 &% 源 文件 第 10 章 \ 商 品 新 款 筛选 "p 
p> 操作 视频 ， 视频 \ 第 10 章 \ 商 品 新 款 筛 选 mp4 


¥ 399.00 fm ¥499.99 1 全 ¥688.99 m3 ¥178.00 名 至 46 万 
( 直 兴 包 ) 必 屋 品 朗 中 长 对 大 衣 2018 理 也 条 次 攻 孔 外 上 大 胡 的 红 负 12018 天 和 新 Std 和 大 在 ETE ) 2018 百 了 hd 妥 风 胡 


"EP == 
po12 先 在 数据 集中 添加 2 列 数 据 , 列 名 分 别 是 promotion 与 newstyle, 表示 促销 与 新 款 的 数据 列 ; 
具有 属性 的 商品 列 值 为 tue， 不 具有 属性 的 商品 列 值 为 false， 如 图 10-55 所 示 。 

玛 根据 实例 41， 底 层 的 复 选 框 会 被 进行 选中 状态 的 切换 ， 在 “12.12 专属 狂欢 节 ” 底 层 复 选 
框 的 “选中 时 ”事件 中 添加 Case1， 设 置 动作 “添加 筛选 ”到 中 继 器 list， 如 图 10-56 所 示 。 设 置 完 
成 功 后 ，“ 属 性 ”选项 卡 如 图 10-57 所 示 。 


配置 中 不 勾 选 “ 移 除 其 他 筛选 "选项 , 确保 能 够 多 条 件 筛选 。 筛选 名称” 为 flterpromotion; 筛选 “条 件 " 为“[[ltem. 
Promotion=='true]j”， 切 记 要 使 用 英文 书写 状态 下 的 单 引号 。 


天 为 该 元 件 的 “取消 选中 时 ”事件 中 添加 “Case1”， 设 置 动作 为 “ 移 除 筛选 ”中 继 器 “list”， 
在 “被 移 除 的 筛选 名 称 ” 文 本 框 中 填写 上 一 步 的 筛选 名 称 “fiterpromotion”， 如 图 10-58 所 示 。 


Et 
image ‘promotion ‘newstyle E27 1] 

长 款 幕 版 春季 风衣 01jpg mtrue false be 
县 旺 瘦 中 长 款 大 衣 02jpg mfalse true 

新 款 毛 呢 外 套 大 衣 03jpg mfalse true 

洪 百 搭 休闲 风衣 04jpg mirue false 

3 春季 新 款 休闲 外 套 05jpg mtrue false 

)18 秋 冬 新 款 过 膝 大 衣 06jpg wfalse true 

大 衣 2018 秋 冬 新 款 07jpg true false 

2018 春 季 新 款 过 膝 风 衣 08jpg mtrue true 

所 款 既 薄 风 衣 外 套 09jpg mtrue false 

类 岂 长 蔚 手 甩 外 套 1nina falsp true ] 泛 

4 咱 » 

i [ 

| 下 攻 弓 20T8 新 歌 专 要 有 四 喇 a 
呢 外 套 2018 春 秋 新 款 13jpg mfalse true 

香 襄 格子 长 被 毛 呢 外 套 14jp9 mtrue false 

座席 松 长 款 过 膀 大 衣 15jpg wfalse true 

1018 秋 冬 新 款 显 疗 毛 呢 大 衣 ”16.jpg efalse ture 

| 春季 新 款 旺 瘦 既 落 风衣 17jpg true true 

对 韩版 时 尚 名 娠 气质 大 衣 18.jpg mtrue false 

| 2018 春 秋 新 款 显 瘦 大 衣 ”19jpg false false 四 

过 膝 中 长 款 千 鸟 格 风衣 20.jpg wfalse true 

4 [ 器 » 
图 10-55 
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图 10-58 
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书写 英文 单词 时 ， 字 母 的 大 小 写 必须 统一 。 


吏 参考 操作 步骤 02~03， 为 “秋冬 新 款 ” 底 层 复 选 框 添加 交互 ， 不 同 的 是 筛选 名 称 为 
fiternewstyle， 筛 选 条 件 为 [tem. newstyle==True]， 如 图 10-59 所 示 。 


We 
Sr Werewatye 


“ a 
条 人 Temnewsyer= ue fx [fom 
格式 : em 一 O00 Pg - Mem age = "IE lm | 


图 10-59 


三 设置 完成 后 ,“ 属 性" 选项 卡 如 图 10-60 所 示 。 单 击 “预览 " 按钮 , 在 浏览 器 中 查看 交互 效果 ， 
如 图 10-61 所 示 。 


当 用 户 单 击 某 个 按钮 或 者 图 片 时 ， 自 动弹 出 一 条 新 的 内 容 ， 显 示 页 面 文字 或 大 图 。 这 种 效果 在 


网 站 中 非常 常见 。 本 例 将 制作 一 个 新 浪 微 博 查看 大 图 和 用 户 评论 的 页 面 ， 当 用 户 单 击 小 图 或 者 评论 
按钮 时 ， 弹 出 对 应 的 页 面 。 


jl 案例 分 析 © 

使 用 各 种 元 件 模拟 网 页 版 微 博 单条 信息 的 页 面 ， 在 单 击 页 面 中 的 缩 略图 时 ， 弹 出 高 清 大 图 。 继 
续 单 击 高 清 大 图 时 ， 大 图 收回 变 为 缩 略图 。 单 击 转发 图 标 或 选项 文字 时 ， 弹 出 转发 页 面 ， 单 击 “x 
文本 ， 转 发 页 面 收回 。 


[ga 


这 款 页 面 采用 温暖 朴实 的 浅 土 黄色 作为 主 色调 , 为 了 强调 页 面 的 轻松 感 , 在 局 部 位 置 点 缀 禁 黄 色 、 
灰色 和 深蓝 色 。 从 总 体 效果 来 看 ， 这 款 页 面 既 有 信息 类 网 站 的 干净 大 气 ， 又 兼顾 时 讯 网 站 的 严 瑾 。 


点 级 色 


网 页 版 微 博 是 时 讯 类 网 站 的 典型 ， 掌 握 其 交互 设计 和 原型 设计 ， 对 之 后 的 学 习 和 工作 都 是 大 有 
益处 的 。 网 页 版 微 博 的 各 种 交互 效果 非常 灵活 和 多 变 ， 符 合 时 下 的 设计 潮流 ， 如 图 10-62 所 示 。 


图 10-62 


实例 45 一 微 博 首页 单条 信息 © 


本 例 使 用 “裁剪 工具 ”、 
文本 标签 和 图 标 元 件 等 控 


* 源 文件 ， 素材 & 源 文件 第 10 章 \ 微 博 首页 单条 信息 .rp 
>> 操作 视频 :视频 第 10 章 \ 微 博 首页 单条 信息 .mp4 
件 ， 绘 制 网 页 版 微 博 单条 信 


息 页 面 ， 希望 用 户 可 以 熟练 回 Wy 上 上 OO 
掌握 各 种 元 件 的 使 用 方法 。 2 ean 
名 新 建 一 个 Axure RP 文件 , 在 “检视 


伟 视 : 
mr 让 出 总 
各 项 参数 如 图 10-63 所 示 。 

2 
古怪 局 


- 检 锅 : 页面 
”Rt BB 本 


index 
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E23 
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Appied Font 
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图 10-63 
一) 使 用 和 矩形 元 件 在 工作 区 添加 控件 ， 如 图 10-64 所 示 。 设 置 矩 形 元 件 的 描 边 为 无 ， 圆 角 半 径 
为 10， 和 矩形 的 位 置信 息 和 颜色 信息 如 图 10-65 所 示 。 


检视 : 算 形 D 
说 明 样式 
位 置 " 尺 二 隐藏 
332 26 600 543 
号 业 标 /加 本 村 宽度 [] 高度 
0 0 ” IhlS 1 
诡 党 Text 
本 新 
Box 1 ”aD 
党 充 ] ~ 
图 10-65 


图 10-64 


大 使 用 图 片 元 件 在 工作 区 添加 一 个 60 x 60 像素 的 头像 控件 ， 图 片 的 圆 角 半径 为 30， 如 图 
10-66 所 示 。 继 续 使 用 文本 标签 元 件 在 工作 区 添加 “ 微 博 名 ”“ 微 博 来 源 ” 和 “ 微 博 正文 ”等 控件 ， 


如 图 10-67 所 示 。 


图 10-67 


图 10-66 
三 使 用 图 片 元 件 继续 在 工作 区 添加 控件 , 等 比例 缩放 图 片 后 对 图 片 进行 裁剪 , 如 图 10-68 所 示 。 
裁剪 时 ， 如 果 图 片 宽度 较 长 ， 需 要 调整 裁剪 框 的 宽度 。 调 整 好 裁剪 框 后 ， 单 击 “ 裁 剪 ”按钮 ， 如 医 


10-69 所 示 。 


[ay 


© 色色 全 全 办 局 可 必 
Rta 


© 名和 全 他 办 可 妥 
mm rn 


图 10-68 图 10-69 


将 图 片 导 人 工作 区 内 ， 用 户 需要 
\ 持 宽 高 比例 ”选项 , 将 图 片 的 宽 或 


图 片 裁剪 为 110 x 110 像素 。 这 时 候 ， 用 户 可 以 使 用 “样式 ”选项 卡 下 的 “ 保 
整 为 110 像素 , 再 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “裁剪 图 片 "命令 


三 裁 前 时 ， 如 果 图 片 高 度 较 大 ， 需 要 调整 裁剪 框 的 高 度 ， 如 图 10-70 所 示 。 继 续 使 用 图 片 元 
件 和 “裁剪 工具 ”在 工作 区 添加 控件 ， 如 图 10-71 所 示 。 


© 委任 查 办 坑 可 避 


图 10-70 图 10-71 


使 用 水 平 线 元 件 和 垂直 线 元 件 在 工作 区 添加 控件 ， 如 图 10-72 所 示 。 继 续 使 用 图 标 字体 元 
件 库 在 工作 区 添加 控件 ， 如 图 10-73 所 示 。 


图 10-72 图 10-73 


玛 使 用 文本 标签 元 件 在 工作 区 添加 控件 ， 如 图 10-74 所 示 。 完 成 后 ， 单 击 “ 预 览 ”按钮 ， 在 
浏览 器 中 预览 页 面 效 果 ， 如 图 10-75 所 示 。 


“十 柯 面 
[| 
宣 量 宣 
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图 10-74 图 10275 


Em 2 


Eb 中 下 将 和 了 六 5 * 源 文件 :素材 & 源 文件 第 10 章 \ 微 博 查 看 大 图 , 
作 网 页 版 徽 博 中 查 Ynen 操作 视频 ， 视 频 第 10 章 \ 伍 博 查看 大 图 
看 大 图 的 交互 效果 。 于 
该 例 的 操作 步骤 简 。 苘 守 SER 首 人 @ 
单 易 懂 ， 非 常 适合 初 Ca 
步 接触 Axure RP 的 


TiPETTTT 


码 使 用 动态 面板 元 件 在 工作 区 添加 控件 , 双击 动态 面板 , 在 弹出 的 对 话 框 中 再 次 双击 “State1” ， 
进入 动态 面板 编辑 状态 ， 如 图 10-76 所 示 。 使 用 图 片 元 件 和 垂直 线 元 件 在 工作 区 内 添加 控件 ， 如 医 
10-77 所 示 。 


asbtiindonl us 


ep 


图 10-76 图 10-77 


现在 "样式 " 选项 卡 中 为 图 片 元 件 命名 ,设置 元 件 的 宽度 和 高 度 ， 具体 参 数 如 图 10-78 所 示 。 
使 用 图 标 字 体 元 件 库 和 文本 标签 元 件 在 工作 区 内 添加 控件 ， 如 图 10-79 所 示 。 


[a 
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码 继续 使 用 图 片 元 件 和 “裁剪 工具 ”在 工作 区 内 添加 50 x 50 像素 的 控件 ， 如 图 10-80 所 示 。 
使 用 相同 方法 完成 相似 控件 的 添加 ， 如 图 10-81 所 示 。 


tom ome ney em se ee “上 
| | a 的 局 


图 10-80 图 10-81 


到 加 到 index 页 面 ， 在 “概要 : 页 面 ”面板 中 选中 第 一 个 图 片 元 件 ， 为 “鼠标 单 击 时 ”事件 添 
加 “显示 / 隐藏” 动作， 如 图 10-82 所 示 。 


回 到 index 页 面 后 , 选中 动态 面板 并 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “设置 隐藏 ”命令 , 将 动态 面板 隐藏 。 


三 再 次 回 到 动态 面板 编辑 页 面 ， 选 中 bigpic1 元 件 ， 为 “鼠标 单 击 时 ”事件 添加 “显示 / 隐藏" 
动作 ， 如 图 10-83 所 示 。 


EE 
2 eset 
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了 完成 交互 事件 的 添加 后 ， 单 击 “ 预 览 ” 按 钮 ， 在 浏览 器 中 查看 原型 的 交互 效果 ， 如 
图 10-84 所 示 。 


去- 要 


了 
败 古 加 庆 国 轩 二 加 号 


图 10-84 


实例 47 一 微 情 转发 页 面 站 


亡 下 来 制作 网 页 版 微 博 转 
发 页 面 ,该 例 中 使 用 的 事件 动作 ， 
较 之 前 有 所 不 同 。 希 望 用 户 通过 
该 例 的 操作 学 习 ， 可 以 掌握 和 了 
解 此 事件 动作 。 
WD 使 用 动态 面板 元 件 在 工作 区 内 添加 控 
件 ， 进 入 动态 面板 编辑 页 面 ， 如 图 10-85 所 示 。 

在 “样式 ”选项 卡 中 设置 动态 面板 的 各 项 参数 ， 

如 图 10-86 所 示 。 


* 源 文件 ， 素 材 &% 源 文件 第 10 章 \ 微 博 转发 页 面 .p 
操作 视频 : 视频 第 10 章 \ 微 博 转 发 页 面 .mp4 
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玛 使 用 图 片 元 件 在 工作 区 内 添加 控件 ， 如 图 10-87 所 示 。 继 续 使 用 文本 标签 元 件 在 工作 区 内 
添加 控件 ， 如 图 10-88 所 示 。 


( 动 才 面板 )/ State (index) ~ 友 帮 面 机) | Statet (index} 


图 10-87 到 10-88 


磷 使 用 水 平 线 元 件 在 工作 区 内 添加 控件 ， 如 图 10-89 所 示 。 使 用 图 片 元 件 和 复 选 框 元 件 在 工 
作 区 内 添加 控件 ， 如 图 10-90 所 示 。 


动态 面板 ) | State1 (index) Inde 支柱 画板 ) / State1 (index) 


| 转发 要因 x 和 x 


图 10-89 图 10-90 


到 使 用 主要 按钮 在 工作 区 内 添加 控件 ， 在 “样式 ”选项 卡 中 设置 按钮 的 各 个 参数 ， 如 
图 10-91 所 示 。 设 置 完成 后 ， 按 钮 的 图 像 效 果 如 图 10-92 所 示 。 


机 D (动态 面板 ) | State1 (indez) ngex - 


图 10-91 图 10-92 


玛 选择 “转发 ”元 件 ， 为 
妈 10-93 所 示 。 选 择 “返回 ”元 付 
如 图 10-94 所 示 。 


”事件 添加 “显示 / 隐藏” 动作， 参数 设置 如 
时 ”事件 添加 “显示 / 隐藏 ”动作 ， 参 数 设置 
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用 户 设置 完成 “转发 ”元 件 的 交互 事件 后 ， 需 要 再 次 进入 “zhuanfa 
动态 面板 的 编辑 页 面 中 ,选中 写 有 * x "的 文本 标签 元 件 ,将 其 命名 为 “返回 "。 
随后 在 元 件 的 “属性 ”选项 卡 中 ， 单 击 “ 鼠 标 单 击 时 ”事件 ， 在 弹出 的 “ 鼠 
标 单 击 时 ”对 话 框 中 ， 添 加 “显示 / 隐藏” 动作， 在 配置 动作 栏目 中 , 勾 选 
“动态 面板 ” 复 选 框 ， 单 击 “ 隐 藏 ”按钮 ， 如 图 10-95 所 示 。 最 后 单 击 “ 确 
定 " 按钮 a 


二 
FE 侈 全 全 志 下 条 要 


图 10-95 


选择“ 转发" 元件 , 在 "属性 " 选项 卡 中 复制 “鼠标 单 击 时 ”事件 , 继续 选中 “转发 数字 " 元 件 ， 
为 其 粘贴 “鼠标 单 击 时 ”事件 ， 如 图 10-96 所 示 。 工 作 区 原型 设计 的 图 像 效 果 ， 如 图 10-97 所 示 。 
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图 10-96 

07) 执行 “发 布 ”> 一 一 
“生成 HTML 文 件 " 命 令 ， 3 ee 
弹出 “生成 HTML” 对 | 
话 框 ， 如 图 10-98 所 示 。 
在 “常规 选项 下 设置 
存放 HTML 文件 的 位 置 ， 
“页 面 ”选项 下 选择 只 
生成 index 页 面 ， 如 
图 10-99 所 示 。 


图 10-98 图 10-99 


加 单 击 “ 生 成 ”按钮 ， 稍 等 片刻 ， 即 可 看 到 生成 的 HTML 文件 ， 如 图 10-100 所 示 。 双 击 
index.html 文件 ， 测 试 页 面 效 果 ， 如 图 10-101 所 示 。 


图 10-100 图 10-101 


网 页 版 百度 首页 案例 p 


本 节 中 的 案例 为 “鼠标 单 击 时 ”事件 添加 了 各 种 链接 类 动作 ， 操 作 简单 ， 用 户 在 实际 操作 中 会 
发 现 每 一 个 链接 类 动作 都 可 以 实现 一 个 不 同 的 交互 效果 。 


2 实 人 分 折 。 @ 


本 案例 中 将 针对 链接 动作 分 别 进行 演示 ， 便 于 读者 理解 和 运用 。 使 用 了 “当前 窗口 ”“ 新 窗 
/ 新 标签 ”“ 弹 出 窗口 ”“ 父 级 窗口 ”“ 关 闭 窗口 ”和 “内 联 框 架 ”等 链接 类 动作 进行 演示 ， 有 助 
于 用 户 深刻 理解 各 类 链接 动作 的 用 途 。 


这 款 页 面 采 用 了 具有 理智 、 准 确 意象 的 蓝 色 为 主 色调 ， 在 局 部 位 置 点 缀 红色 、 灰 色 和 深蓝 色 。 
从 总 体 效 果 来 看 ， 这 款 页 面 婚 有 搜索 类 网 站 的 安全 感 ， 又 兼顾 信息 类 网 站 的 活泼 。 
主 色调 点 缀 色 


该 例 的 线 框图 如 图 10-102 所 
示 。 从 大 体 来 看 ， 该 例 使 用 的 元 件 全 :如 
较 少 而 且 都 容易 操作 ， 且 操作 时 添 
加 的 事件 动作 同样 简单 易 用 ， 基 本 
没有 难点 存在 。 用 户 在 学 习 操作 时 ， 
要 注意 各 个 事件 动作 的 正确 性 。 


图 10-102 
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实例 48 一 百度 首页 搜索 框 © 


本 例 在 
主要 按钮 元 
件 上 应 用 了 

“鼠标 单 击 
时 ”事件 ， 
添加 了 “链接 到 新 窗口 ” 动 
作 ， 实 现在 下 拉 列 表 中 选择 
选项 ， 并 链接 到 对 应 页 面 的 
原型 。 


* 源 文件 : 素材 & 源 文件 第 10 章 ,网 页 版 百度 首页 .p 
上 操作 视频 : 视频 第 10 章 \ 百 度 首页 搜索 框 mp4 
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到 使 用 图 片 元 件 在 工作 区 添加 控件 ， 如 图 10-103 所 示 。 在 “检视 :图 片 ”面板 下 的 “样式 ” 
选项 卡 中 ， 图 片 元 件 各 个 参数 如 图 10-104 所 示 。 


图 10-103 图 10-104 


三 使 用 主要 按钮 元 件 在 工作 区 内 添加 控件 , 如 图 10-105 所 示 。 在“ 检视: 和 矩形” 面板 下 的 “ 样 
式 ” 选 项 卡 中 ， 按 钮 元 件 的 各 个 参数 如 图 10-106 所 示 。 
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|E| 图 元 汪 另 由 
|] 


ge | 
后 
习 | “ EE 品 
| (生动 
He 
他 轨 * 尺 二 吐 要 万 广 
1032 224 105 40 
Te 和 ys 实 变 [] 喜 度 
lo "lo 」 [al 
i 
| Primary Butom ~ 一 By 
[sa : 
型。 单 色 | 
叭 品 会 国 当当 网 a 
国 #3 | 办 | 更 多 
图 10-105 图 10-106 


三 使 用 下 拉 列 表 框 元 件 在 工作 区 内 添加 控件 ， 如 图 10-107 所 示 。 在 “检视 ， 下 拉 列 表 框 ” 面 
板 下 的 “样式 ”选项 卡 中 ， 下 拉 列 表 元 件 的 各 个 参数 如 图 10-108 所 示 。 


[二 
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" 裕 六 .下 过 列表 杠 D 
(下 戎 尺 苇 在 活动 
= " 
位 置 * 尺 二 人 站 正方 
493 224 540 40 
二 ys 这 可 [] 训 设 
RE 
5 一 
He 因 训 Fe Mss #8 国 ss 到 a9 Droplist = 天 
Og 国 百 放下 三 半 -PPT 后 pe 后 一 ER 网 日 3 王 证 充 CE 
图 10-107 图 10-108 


到 双击 下 拉 列 表 框 元 件 ， 弹 出 “编辑 列表 选项 ”对 话 框 ， 如 图 10-109 所 示 。 在 该 对 话 框 中 添 
加 详细 参数 ， 如 图 10-110 所 示 。 


Ca jl ww | Cm JC mw 


图 10-109 图 10-110 


三 参数 添加 完成 后 ， 工 作 区 内 的 图 像 效果 如 图 10-111 所 示 。 双 击 “page1” 页 面 进入 页 面 ， 
使 用 图 片 元 件 在 工作 区 内 添加 控件 ， 如 图 10-112 所 示 。 


击 yaa 故 z50s 全 FE 园 妇 Pa 理 。 。 加 ss 亲 和 


图 10-111 图 10-112 


IB 日 到 index 页 面 ， 选 中 按钮 元 件 ， 为 其 “鼠标 单 击 时 ”事件 添加 动作 ， 如 图 10-113 所 示 。 
完成 后 ， 原 型 设计 如 图 10-114 所 示 。 


玛 单 击 工具 栏 上 的 “预览 ”按钮 ， 可 以 在 浏览 器 中 查看 原型 设计 的 页 面 效果 和 交互 效果 ， 如 
图 10-115 所 示 。 


| 
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实例 49 一 制作 链接 页 面 © 


本 例 中 为 图 标 添 加 了 “鼠标 单 击 时 ”事件 ， 使 用 户 在 单 击 图 标 后 ， 页 面 会 在 当 
前 窗口 打开 链接 网 页 。 


上 源 文件 ， 素材 &% 源 文件 第 10 章 \ 网 页 版 百度 首页 .p 
* 操 作 视频 : 视频 第 10 章 \ 制 作 链接 页 面 .mp4 
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到 接 上 一 个 实例 ， 拖 蝶 一 个 图 片 元 件 到 index 页 面 工作 区 内 ， 双 击 元 件 ， 导 入 如 图 10-116 所 
示 的 图 片 。 
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图 10-116 

玛 拖 入 一 个 文本 标签 元 件 ， 输 入 文本 “QO 空间 ”， 如 图 10-117 所 示 。 设 置 文本 样式 ， 文 本 
的 具体 参数 设置 如 图 10-118 所 示 。 
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图 10-117 图 10-118 


于 选中 图 片 元 件 ， 为 该 元 件 重 命名 为 “空间 图 标 ”， 如 图 10-119 所 示 。 双 击 “ 鼠 标 单 击 时 ” 
事件 ， 打 开 “ 用 例 编辑 ”对 话 框 ， 如 图 10-120 所 示 。 
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图 10-119 图 10-120 


到 在 "添加 动作 " 选项 中 , 选择 “当前 窗口 " 选项, 在 “配置 动作 " 选项 中 选择 “链接 到 url 或 文件 ” 
选项 ， 在 超 链 接 下 输入 链接 地 址 ， 如 图 10-121 所 示 。 
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图 10-121 


硒 单 击 "确定 " 按钮 ， 回 到 页 面 编辑 区 ， 如 图 10-122 所 示 。 单 击 工具 栏 上 的 “预览 ”按钮 ， 
预览 效果 如 图 10-123 所 示 。 


图 10-122 图 10-123 


实例 50 一 一 新 窗口 和 弹出 窗口 


本 例 中 为 按钮 添加 了 “鼠标 单 击 时 ”事件 的 “新 窗口 ”和 “弹出 窗口 ”动作 ， 
当 用 户 在 浏览 器 中 单 击 按钮 ， 页 面 将 会 跳 转 到 指定 的 新 窗口 或 弹出 窗口 中 。 


* 源 文件 ， 素 材 & 源 文件 第 10 章 \ 网 页 版 百度 首页 .p 
操作 视频 视频 第 10 章 新 窗口 和 弹出 窗口 .mp4 
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@ 12700.132767/164245/ 新 窑 Dhtml 


© |© 127001:32767/starhtmltp=%E5%BC%B89%E59687%BA3E7%AA3697%E5%8FXcA3&g=1 


上 证 入 设计 网 冯 
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吏 接 上 一 个 实例 , 在 “页 面 " 面板 中 , 将 “page2" 页 面 重 命名 为 “新 窗口 ", 如 图 10-124 所 示 。 
双击 新 页 面 ， 在 该 页 面 中 拖 入 一 个 按钮 元 件 ， 如 图 10-125 所 示 。 
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sr BEX 
图 10-124 图 10-125 
设置 字体 为 "微软 雅 黑 " ,字号 为 13, 字体 颜色 为 #333333, 输入 文字 内 容 如 图 10-126 所 示 。 
选中 该 元 件 ， 双 击 “ 鼠 标 单 击 时 ”事件 ， 打 开 “ 用 例 编辑 ”对 话 框 ， 如 图 10-127 所 示 。 
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图 10-126 图 10-127 
天) 在 "添加 动作 " 选项 中 , 选择 “链接 " > "打开 链接 " 下 的 “新 窗口 /新 标签 " 选项 ，" 组 织 动作 " 
选项 中 显示 如 图 10-128 所 示 。 在 “配置 动作 ”选项 中 选择 “链接 到 ur 或 文件 ”选项 ， 在 “ 超 链接 ” 
文本 框 中 输入 链接 地 址 ， 如 图 10-129 所 示 。 
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图 10-128 


了 I) 单 击 “ 确 定 ” 按 钮 ， 回 到 页 面 编辑 区 ， 执 行 “ 预 览 ” 命 令 ， 预 览 项 目 ， 如 图 10-130 和 
10-131 所 示 。 
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图 10-130 
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图 10-131 


三 继续 修改 “page3” 页 面 的 名 称 为 “弹出 窗口 ”。 在 该 页 面 中 拖 描 一 个 “提交 ”按钮 ， 显 示 
文本 为 “ 单 击 此 按钮 ”， 如 图 10-132 所 示 。 为 按钮 添加 “鼠标 单 击 时 ”事件 ， 在 “用 例 编辑 ”对 
话 框 中 添加 “弹出 窗口 ”动作 ， 如 图 10-133 所 示 。 


图 10-132 


厦 在 “配置 动作 ”选项 中 设置 参数 ， 如 图 10-134 所 示 。 单 击 “ 确 定 ”按钮 ， 回 到 页 面 编辑 


中 ， 如 图 10-135 所 示 。 
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总] 执行 “预览 ”命令 ,预览 项 目 ， 如 图 10-136 所 示 。 
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图 10-136 


在 测试 时 ， 谷 歌 浏览 器 将 不 能 正确 显示 效果 。 如 果 不 能 正确 显示 链接 效果 ， 可 以 选择 不 同 的 浏览 器 测试 。 
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互 效 果 。 


加 淅 0 名 称 为 “ 父 级 窗口 ”的 


页 面 ， 在 主页 面 内 添加 子 页 面 ， 如 图 
10-137 所 示 。 双 击 进入 子 页 面 编辑 Se 


区 ， 拖 入 如 图 10-138 所 示 的 图 片 。 
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玛 为 图 片 元 件 添加 “鼠标 单 击 时 ”事件 ， 弹 出 “用 例 编辑 ”对 话 框 ， 如 图 10-139 所 示 。 单 击 
“确定 ”按钮 ， 回 到 页 面 编辑 区 ， 效 果 如 图 10-140 所 示 。 
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图 10-139 图 10-140 


王 进入 “ 父 级 窗口 ”页 面 ， 添 加 主要 按钮 元 件 ， 输 入 如 图 10-141 所 示 的 文本 。 为 该 按钮 元 件 
添加 “鼠标 单 击 时 ”事件 ， 弹 出 “用 例 编辑 ”对 话 框 ， 如 图 10-142 所 示 。 
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图 10-141 图 10-142 


芭 单 击 “确定 ”按钮 ， 回 到 页 面 编辑 区 ， 执 行 “ 预 览 ”命令 ， 查 看 效果 ， 如 图 10-143 和 
图 10-144 所 示 。 
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图 10-143 图 10-144 
玛 继续 添加 名 称 为 “关闭 窗口 ”的 页 面 ， 在 该 页 面 中 添加 图 片 元 件 ， 如 图 10-145 所 示 。 为 
图 片 元 件 添加 “鼠标 单 击 时 ”事件 ， 在 “用 例 编辑 ”对 话 框 中 添加 “关闭 窗口 ”动作 ， 如 图 10-146 
所 示 。 
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图 10-145 图 10-146 


了 单 击 “ 确 定 ”按钮 ， 回 到 页 面 编辑 区 ， 如 图 10-147 所 示 。 执 行 “ 预 览 ” 命 令 ， 查 看 效果 ， 
在 浏览 器 任意 位 置 单 击 ， 弹 出 如 图 10-148 所 示 的 提示 框 。 


图 10-147 图 10-148 
芭 添加 名 称 为 “内 联 框架 ”的 页 面 ， 在 该 页 面 中 拖 遇 内 联 框架 元 件 ， 如 图 10-149 所 示 。 继 续 


拖 忠 表格 元 件 ， 如 图 10-150 所 示 。 
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图 10-149 图 10-150 


到 默认 的 表格 元 件 是 3 行 3 列 ， 用 户 可 以 根据 需要 对 表格 进行 编辑 ， 选 中 表格 元 件 ， 单 击 鼠 
标 右键 ， 在 快捷 菜单 中 即 可 选择 “删除 行 ”或 “删除 列 ”命令 ， 如 图 10-151 所 示 。 将 表格 调整 为 1 
行 2 列 ， 如 图 10-152 所 示 。 
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大 分 别 为 单元 格 输入 文字 内 容 ， 如 图 10-153 所 示 。 为 第 一 个 单元 格 添加 “鼠标 单 击 时 ”事件 ， 

在 “用 例 编辑 ”对 话 框 中 添加 “内 联 框架 ”动作 ， 如 图 10-154 所 示 。 使 用 相同 的 方法 为 第 2 个 单 


元 格 添加 事件 和 动作 。 
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0) 单 击 “确定 ”按钮 ， 回 到 页 面 编辑 区 ， 如 图 10-155 所 示 。 执行 “文件 ”>“ 保 存 ” 命 令 ， 


图 10-155 图 10-156 
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